3D&背面不可见&景深

3D

3D空间

transform-style：preserve-3d；

3d旋转

rotate3d(x,y,z,度数)
        注：x y z 一个矢量值  0 不旋转   1 旋转
        eg:rotate3d(1,1,0,45deg)
        等价于：rotateX(45deg) rotateY(45deg)

让背面不可见

backface-visibility:hidden;

景深

perspective：值越大距离约远（给父元素添加）
     一般取值范围：900-1200
perspective-origin:
      属性值：
           中间：center
           左上角：left top
           右上角：right top
           或10xp  10px

css3 - 动画

 1：制作关键帧

        @keyframes 动画名称{
            /*开始*/
            from{
                left:0;
            }
            /*结束*/
            to{
                left:500px;
            }
        }

或
        @keyframes 动画名称{
            0%{

            }
            //中间可以添加任意关键帧
            20%{

            }
            50%{

            }
            70%{

            }
            100%{

            }
        }
2: 调用关键帧：
        简写方式：
        animation:动画的名称  动画的时间   延迟时间 动画的类型
            动画循环的次数 （无限循环：infinite）
            动画运动的方向:  reverse   alternate[先正后反]  
                          alternate-reverse[先反后正])
            运动的状态:     animation-plat-state : running  paused(暂停)
            动画停止的状态:  animation-fill-mode:forwards (停在最后一帧);

        动画的类型：
                linear 匀速
                ease  默认值
                step-start:马上跳到动画每一结束桢的状态

[注]transition 和 animation的区别：
                            transition需要事件触发（例如：鼠标滑过）
                            animation：自动触发

标签：动画,背面,关键帧,45deg,animation,left,景深,3D
来源： https://www.cnblogs.com/msx-hanquan/p/12748182.html