逆战班 css 3D效果+动画

### 3D

2d: 水平方向(x轴) 和 垂直方向(y轴)

 3d: 多了一个z轴            

z轴 就是你对屏幕垂直的视线,靠近屏幕的方向就是正向,远离屏幕的线是反向

css3 景深 (3D的空间)

      观察物体的时候  近大远小

      给父级元素添加:

          transform-style:preserve-3d;形成3D的空间

          perspective:800px;添加景深  形成近大远小的效果 900px-1200px

      设置观察点:

          perspective-origin:;

          left right

             top bottom

             10px 10px

补充： background:rgba(红,绿,蓝,透明度);a 透明度 取值范围 0-1 背景颜色透明

3D功能函数:

    3D的位移

        translateX()

        translateY()

        translateZ()

               3D的旋转

        rotateX()

        rotateY()

        rotateZ()

                     

    3D的缩放

        scaleX()

        scaleY()

        scaleZ()

###动画

与过度的区别：

transition:;    过渡 需要事件触发

animation       动画 不需要事件触发,使用关键帧就可以执行

1: 定义动画

      1. from{}起始位置

       to{}终点位置

                     

     2.  0%{}起始位置

        5%{}过程1

        ...过程n

        100%{}  终点位置                 

2: 调用动画

        animation-name:;关键帧名字 动画名

        animation-duration:;关键帧时长 总运动时间

        animation-delay:;关键帧延迟时间

        animation-iteration-count:;运动执行次数

                    数字   数字为几,执行多少次

                    默认情况一次

         infinite无限循环

         animation-direction:;动方向

                          reverse 反向运动

                          alternate   单数次,顺时针  偶数次,逆时针

                    alternate-reverse 单数次,逆时针  偶数次,顺时针

         animation-timing-function:;运动使用的类型(加速 减速 贝塞尔曲线运动...)

         animation-play-state:;

                    paused  暂停

                    running 运动

     综合写法:animation:名字 运动时间 速度 延迟时间 次数;