空间转换

1.空间转换

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

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

2.空间位移

目标:使用translate实现元素空间位移效果
语法:

• transform: translate3d(x, y, z);
• transform: translateX(值);
• transform: translateY(值);
• transform: translateZ(值);
  取值：
• 像素单位数值
• 百分比

3.透视

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

• 默认情况下无法观察到Z轴位移效果 需要使用perspective属性实现透视效果
• 属性 (添加给父级)
  -perspective的取值是像素值，一般在800~1200
• 作用 空间转换时，为元素添加近大远小、近实远虚的视觉效果 透视距离也称为视距，就是人的眼睛到屏幕之间的距离。

4. 空间旋转

使用 rotate实现元素空间旋转效果
-语法
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);

5.立体呈现

目标:使用transform-style:preserve-3d呈现立体图形
实现方法：
添加 transform-style: preserve-3d;
使子元素处于真正的3d空间 呈现立体图形步骤

1. 盒子父元素添加transform-style: preserve-3d；
2. 按需求设置子盒子的位置（位移或旋转）

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

6.空间缩放

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

• 语法 ：
• transform: scaleX(倍数);
• transform: scaleY(倍数);
• transform: scaleZ(倍数);
• transform: scale3d(x, y, z);