CSS3基础之3D转换

---

1. 三维坐标系

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

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

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

2. 3D位移translate3d

1. translform:translateX(50px)：在x轴移动
2. translform:translateY(50px)：在Y轴移动
3. translform:translateZ(50px)：在Z轴移动
4. transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离

tips： 因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动

3. 透视perspective

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

• 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
• 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
• 距离视觉点越近的在电脑平面成像越大，越远成像越小
• 通俗讲，就是 “近大远小”

• d：就是视距，视距就是一个距离人的眼睛到屏幕的距离
• z：就是 z轴，物体距离屏幕的距离，z轴越大（正值） 我们看到的物体就越大

3.1translateZ

• translform:translateZ(50px)：在Z轴移动
• 有了透视，就能看到translateZ 引起的变化了

4. 3D旋转rotate3d

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

• transform: rotateX(60deg) ：沿X轴的正方向旋转60度
• transform: rotateY(60deg) ：沿Y轴的正方向旋转60度
• transform: rotateZ(60deg) ：沿Z轴的正方向旋转60度
• transform: rotate3d(x,y,z,deg) ：沿自定义轴旋转自定义大小的角度

<style>
    transform: rotate3d(1, 0, 0, 45deg);
    /* 表示沿X轴旋转45度 */
    transform: rotate3d(1, 1, 0, 45deg);
    /* 表示沿X轴与Y轴夹角的一半的方向旋转45度 */
</style>

tips： xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度

5. 3D呈现transform-style

• 控制子元素是否开启三维立体环境
• transform-style: flat 子元素不开启3d立体空间（默认）
• transform-style: preserve-3d 子元素开启立体空间
• 代码写给父级，但是影响的是子盒子