CSS3 3D转换

1. 认识 3D 转换

• 3D 的特点

  • 近大远小
  • 物体和面遮挡不可见

• 三维坐标系

  • x 轴：水平向右（右边是正值，左边是负值）

  • y 轴：垂直向下（下面是正值，上面是负值）

  • z 轴：垂直屏幕（朝眼睛的是正值，反之是负值）

---

2. 3D 移动 translate3d

在 2D 移动的基础上多加了一个 z 轴的移动方向

语法：

• 水平移动：transform: translateX()
• 垂直移动：transform: translateY()
• z 轴上移动：transform: translateZ(n)
  • n：正值越大，看到的物体就越大（单位只用px）
• 3D移动简写：transform: translate3d(x, y, z)

单位：px、百分比（以自身宽高为基准）

注意：简写中值不能省略，没有就写 0

---

3. 视距 perspective

视距就是指眼睛到屏幕的距离，越近在电脑平面成像越大，越远成像越小

设置视距后即可使网页产生 3D 效果（相当于 3D 物体投影的 2D 平面上）

语法：perspective: 距离px;

注意：视距是在祖辈父级元素上进行设置都有效，通常用 500px

---

4. 3D 旋转 rotate

3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转

语法：

• 沿 X 轴旋转：transform: rotateX(角度deg)（正角度向后旋转）
• 沿 Y 轴旋转：transform: rotateY(角度deg) （正角度向右旋转）
• 沿 Z 轴旋转：transform: rotateZ(角度deg)（正角度顺时针旋转）
• 自定义轴旋转：transform: rotate3d(x, y, z, 角度deg)
  • X，Y，Z 设定就写 1，不设定写 0（不可为空）

例：transform: rotate3d(1, 1, 0, 45deg);（沿对角线旋转45度）

---

5. 3D 呈现 transform-style

控制子元素是否开启三维立体环境

语法：transform-style: 属性;

属性：

• flat：默认子元素不开启 3D 立体空间
• preserve-3d：子元素开启立体空间

注意：写给上一层的父元素上

---

6. 浏览器私有前缀

-moz-：代表 firefox 浏览器私有属性
-ms-：代表 ie 浏览器私有属性
-webkit-：代表 safari、chrome 私有属性
-0-：代表 Opera 私有属性

---