空间转换

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。    空间转换也叫3D转换

属性：transform

透视

目标：使用perspective属性实现透视效果

属性（添加给父级）

 perspective: 值;

取值：像素单位数值， 数值一般在800 – 1200。

 作用：

空间转换时，为元素添加近大远小、近实远虚的视觉效果

空间旋转

目标：使用rotate实现元素空间旋转效果

 transform: rotateZ(值);

 transform: rotateX(值);

 transform: rotateY(值);

左手判断法：使用rotate实现元素空间旋转效果

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

立体呈现

目标： 使用transform-style: preserve-3d呈现立体图形

呈现立体图形步骤

1. 盒子父元素添加transform-style: preserve-3d；

2. 按需求设置子盒子的位置（位移或旋转）

注意：空间内，转换元素都有自已独立的坐标轴，互不干扰

空间缩放

目标：使用scale实现空间缩放效果

语法

 transform: scaleX(倍数);

 transform: scaleY(倍数);

 transform: scaleZ(倍数);

 transform: scale3d(x, y, z);

动画的实现步骤及属性：

使用steps实现逐帧动画

 逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。

 animation-timing-function: steps(N)；

 将动画过程等分成N份

精灵动画制作步骤

 准备显示区域

 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图

 定义动画

 改变背景图的位置（移动的距离就是精灵图的宽度）

 使用动画

 添加速度曲线steps(N)，N与精灵图上小图个数相同

 添加无限重复效果