HTML+CSS空间转换

平移

• 空间：从坐标轴角度定义的X、Y、Z三条坐标轴构成了一个立体空间，Z轴位置与视线方向相同
• 空间转换也叫3D转换
• 属性：transform:translate3d(x,y,z)

                  transform:translateX()

                  transform:translateY()

                  transform:translateZ()

• 取值（正负均可）

           像素单位取值；百分比（参照盒子自身尺寸计算结果）

• 注意

         电脑是平面的，默认情况下无法观察Z轴的平移效果

        3d 写法小括号里必须逗号隔开三个数

视距-perspective

• 作用：指定了观察者与z=0平面的距离，为元素添加透视效果
• 透视效果：近大远小、近实远虚
• 属性：perspective:视距；（添加给父级，取值范围800-1200）

               

旋转

• 属性：

            transform:rotateZ(值)；

            transform:rotateX(值)；

            transform:rotateY(值)；

• 左手法则-根据旋转方向确定取值正负

    左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向

• 拓展（不常用）：

         rotate3d(x,y,z,角度度数)：用来设置自定义旋转轴的位置及旋转的角度

          x,y,z取值为0-1之间的数字

立体呈现:transform-style

• 作用：设置元素的子元素是位于3D空间中还是平面中
• 属性名：transform-style
• 属性值：

         flat:子级处于平面中

         preserve-3d:子级处于3D空间

• 呈现立体图形步骤

1. 父元素添加transform-style：preserve-3d;
2. 子级定位
3. 调整盒子的位置（位移或旋转）

空间缩放

• 属性：transform:scale3d(x,y,z);

                 transform:scaleX();

                 transform:scaleY();

                 transform:scaleZ();

动画-animation

• 过渡：实现两个状态之间的变化过程
• 动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
• 实现步骤

1. 定义动画
2. 使用动画   animation:动画名称  动画花费时长（以秒为单位） 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；

提示：

• 动画名称和动画时长必须赋值
• 取值不分先后顺序
• 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
• 速度曲线：

           linear是匀速

           steps()分布动画（ 工作中配合精灵图实现精灵动画）

• 重复次数：infinite是无限循环

• alternate:反向

• forwards:可以让动画结束完毕时停在结束位置

  backwards:可以让动画停留在开始状态，（默认）

• animation的拆分属性：

• 无缝动画原理：复制开头图片到结尾位置（图片累加宽度=区域宽度）

• 精灵动画制作步骤：

1. 准备显示区域：盒子尺寸与一张小精灵图尺寸相同

2. 定义动画：移动背景图（移动距离=精灵图宽度）

3. 使用动画（steps(N),N与精灵小图个数相同）（当动画的开始状态样式与盒子默认样式相同可以省略动画开始状态的代码）

• 多组动画：animation:动画一，动画2，动画N；