# CSS3 3D 转换

3D 转换我们主要学习工作中最常用的 3D 位移和 3D 旋转

主要知识点 :

• 3D 位移 : translate3d (x,y,z)
• 3D 旋转 : rotate3d (x,y,z)
• 透视 : perspective
• 3D 呈现 : transform-style

# 三维坐标系

三维坐标系就是指立体空间，立体空间是由三个轴共同组成的

• x 轴：水平向右 注意 : x 右边是正值，左边是负值
• y 轴：垂直向下 注意 : y 下面是正值，上面是负值
• z 轴：垂直屏幕 注意：往外面是正值，往里面是负值

# 3D 移动 translate3d

3D 移动在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向

• transform: translateX (100px) : 仅仅是在 x 轴上移动
• transform: translateX (100px) : 仅仅是在 y 轴上移动
• transform: translateX (100px) : 仅仅是在 z 轴上移动 (注意 : translateZ 一般用 px 做单位)
• transform: translate3d (x,y,z) : 其中 x, y, z 分别指要移动的轴的方向的距离

# 透视 perspective

在 2D 平面产生近大远小视觉立体，但是只是效果二维的

• 如果想要在网页产生 3D 效果需要透视 (理解长城 3D 物体投影在 2D 平面内)
• 模拟人类的视觉位置，可认为安排一只眼睛去看
• 透视我们也成为视距：视距就是人的眼睛到屏幕的距离
• 距离视觉点越近的在电脑平面成像越大，越远成像越小
• 透视的单位是像素

透视写在被观察元素的父盒子上面

d : 就是视距，视距就是一个距离人的眼睛到屏幕的距离

z : 就是 z 轴，物体距离屏幕的距离，z 轴越大 (正值) 我们看到的物体就越大

# 3D 旋转 rotate3d

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

• transform: rotateX (45deg) : 沿着 x 轴正方向旋转 45 度
• transform: rotateY (45deg) : 沿着 y 轴正方向旋转 45 度
• transform: rotateZ (45deg) : 沿着 z 轴正方向旋转 45 度
• transform: rotate3d (x, y, z, deg) : 沿着自定义轴旋转 deg 角度 (了解)

# 3D 呈现 transform-style

• 控制子元素是否开启三维立体环境
• transform-style: flat 子元素不开启 3d 立体环境，默认
• transform-style: preserve-3d; 子元素开启立体空间
• 代码写给父级，但是影响的是子盒子
• 这个属性很重要，后面必用