空间转换
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
-
空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
-
空间转换也叫3D转换
-
属性：transform
空间位移
目标：使用translate实现元素空间位移效果
语法
-
transform: translate3d(x, y, z);
-
transform: translateX(值);
-
transform: translateY(值);
-
transform: translateZ(值);
取值（正负均可）
-
像素单位数值
-
百分比
透视
目标：使用perspective属性实现透视效果
属性（添加给父级）
-
perspective: 值;
-
取值：像素单位数值， 数值一般在800 – 1200。
作用
- 空间转换时，为元素添加近大远小、近实远虚的视觉效果
空间旋转
目标：使用rotate实现元素空间旋转效果
- 左手法则
- 判断旋转方向 : 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
空间旋转
目标：使用rotate实现元素空间旋转效果
拓展
-
rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
-
x，y，z 取值为0-1之间的数字
立体呈现
目标： 使用transform-style: preserve-3d呈现立体图形
-
呈现立体图形步骤
-
盒子父元素添加transform-style: preserve-3d；
-
按需求设置子盒子的位置（位移或旋转）
-
-
注意
-
- 空间内，转换元素都有自已独立的坐标轴，互不干扰
