【新】移动端web（day2）（空间转换+动画）

1.3D空间转换：

多了一条z轴，z轴位置与视线方向相同 往外为正 往内为负

①位移：transform：translatex/y/z（距离），translate3D(x,y,z)；没有就写0 不能省略

②旋转：transform：rotatex/y/z（角度），rotate（x,y,z,deg）; 设置自定义旋转轴的位置及角度 x，y，z取值为0-1之间的数字

③缩放：transfrom：scalex/y/z（倍数），scale3D（x,y,z,倍数）；（大于1放大 小于1缩小）

左手准则 拇指朝正方向 手指弯曲方向为旋转正值方向

透视（视距）：perspective：xxpx；（800~1200）（人的眼睛到屏幕的距离）值越小则表示人的眼睛到屏幕的距离越近）（产生一个近大远小的效果）（写在被观察元素的父盒子上）

3D呈现（不常用）：transform-style：preserve-3d（开启）/ flat（不开启）（默认值表示子元素处于2D平面内呈现）；控制子元素是否开启三维立体环境

案例：3D导航

2.动画 animation

过渡：两个状态用过渡

动画：实现多个状态间的变化过程，动画过程可以控制（重复播放、最终画面、是否停止）

动画本质：快速切换大量图片时在人脑中形成具有连续性的画面

构成动画的最小单元：帧或动画帧

使用方法：

①定义动画： @keyframes 动画名称{

                                              from / 0%{}

（动画的开始状态和盒子的默认状态样式相同 代码可以省略）

                                               to / 100% {}

                                         }

②调用动画：

animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；

（动画名称和时长必须赋值 取值不分先后 如有两个时间值，第一个时间表示动画时长 第二个表示延迟时间）

多个动画 动画名称用逗号隔开

速度曲线： linear（匀速 补间动画） steps()（逐帧动画  配合精灵图使用））

延迟时间：xxxs

重复次数：infinite （无限循环）

动画方向：alternates （带有反向的动画效果）

执行完毕状态：重复次数和动画方向要去除，backwards 停留在最初状态（默认值）

                                                                         forward（停留在结束时的状态）

案例：人物奔跑 

先定义一个显示区域 该区域的大小和精灵图的宽高相同（单个精灵图的宽）

在将精灵图设置为背景图 再定义动画 最后调用

 @keyframes move {
            /* 定义动画 改变背景图的位置 移动的距离是精灵图位置 */
            from{
              background-position: 0 0;
              
            }
            to{
                background-position: -1680px 0;
               
            }
        }

 .box{
   move 5s steps(12) infinite;
  }

 案例：走马灯（无缝动画） 全民出游案例