1.3d转换是改变标签在3坐标系上的位置和形状的一种技术
3D特点：

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

1.1.3维坐标系

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

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

2.3d移动translate3d

3d移动在2d移动的基础上多加了一个可以移动的方向，就是z轴方向
语法：
（1） transform:translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离，xyz是不能省略的，如果没有就写0
（2） translform:translateX(100px) 仅仅是移动在x轴上移动
（3） translform:translateY(100px) 仅仅是移动在Y轴上移动
（4） translform:translateZ(100px) 仅仅是移动在Z轴上移动
注意:
因为z轴是垂直屏幕，由里指向外面，所以 默认是看不到元素在z轴的方向上移动，想要看到，可以使用下面的 视距 属性设置

2.1.视距 perspective（了解）

• 人在看物体时，有个规律，如 远的物体看起来小 近的物体看起来大
• **perspective视距：就是用来设置 人 和 物体 的距离

上图总结：
（1）d:视距，眼睛到屏幕的距离，视距与物体大小的关系成反比。 (近大远小 ： 视距变小，眼睛离屏幕越来越近，物体离眼睛越来越近，物体变大----近大 )
（2）z:translateZ，物体距离屏幕的距离，z轴距离与物体大小的关系成正比。 (近大远小：translateZ变大，物体离眼睛越近，物体变大 ----- 近大)
（3）z，并不是z轴，其实是translateZ。视距和translateZ其实都是在Z轴上的距离。
（4）perspective ，透视，理解为视距。 （也可以理解为3D眼睛，给元素添加3D效果，并且想看到，必须带上3D眼睛，给父亲添加perspective ）
perspective字面意思是：透视。
e.g.
（1）设置物体的 一般大于 0 如 （2）设置 人和物体的距离 （ 视距） 这个值规定要设置给物体的父元素 （3）动态改变物体的 即可观察效果
注意： 这个效果很像放大效果，但其实是不一样的。

2.2.perspective与translateZ

d：视距，眼睛到屏幕的距离，视距与物体大小的关系成反比。
z：translateZ，物体距离屏幕的距离，轴距离与物体大小的关系成正比。
从上述结果中发现，perspective与translateZ都可以调整物体的大小。那么我们要使用哪个呢？

perspective是给父元素添加的，而translateZ是给自己添加的。

我们可能会碰到这样的情况，一个父盒子中有多个子盒子。我们给父盒子设置一个固定的视距perspective，然后子盒子设置不同的translateZ，这样子盒子就会有一个相同视距下的不同的大小。
而且，物体想实现3D效果，必须添加透视perspective。

如何使用：
父元素添加一个固定的perspective，子元素再添加translateZ，才会有3D效果。

必须配合使用。

虽然两个都可以让盒子大小改变，但是必须配合使用才行。

让盒子变大变小，一般不会改变perspective，而是是调整translateZ来改变。

2.3.总结：

（1）translateZ的值和perspertive都要大于0 否则容易出现兼容性问题

（2）translateZ：近大远小（translateZ距离近（值越大）物体越大，近大）

（3）translateZ：往外是正值

（4）translateZ：往里是负值

3.3d旋转rotate3d

3.1.介绍

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

3.2.rotateX

旋转的度数有正负，正负值往哪边旋转，这个是有规律的。我们看左手准则：

左手准则：

对于元素旋转的方向的判断 我们需要先学习一个左手准则

比如要判断某元素沿着x轴是怎么旋转的

(1)左手的手拇指指向 x轴的正方向

(2)其余手指的弯曲方向就是该元素沿着x轴旋转的方向了

总结：rotateX( 正值 )，旋转方向是向后倒，向屏幕里旋转。

3.3.rotateY

Y轴方向旋转的正负值，也是影响了旋转的方向，方向如何区分？依然看左手准则：

左手准则：

(1)左手的手拇指指向 y轴的正方向

(2)其余手指的弯曲方向就是该元素沿着y轴旋转的方向（正值）

如图：

3.4.rotateZ

左手准则

z轴正方向是屏幕到眼睛的方向，四指的方向是顺时针方向（反之逆时针）

3.5.rotate3d-自定义轴（了解）

语法：

• xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。
• transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45deg
• transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg
  理解：
  矢量（vector）是一种既有大小又有方向的量，又称为向量。
  xyz是矢量，x指定1说明沿着x轴旋转。0说明不沿着x轴旋转。（0，1有大小，又代表x或y或z，也有方向）

4.3D呈现transform-style

4.1.介绍

• 控制子元素是否开启三维立体环境。
• transform-style: flat 子元素不开启3d立体空间 默认的 （flat：平的，平面）
• transform-style: preserve-3d; 子元素开启立体空间（preserve：[prɪˈzɜ:v] 保持）
• 代码写给父级，但是影响的是子盒子
• perspective是开启3D效果，transform-style: preserve-3d是保持3D效果 ***
• 这个属性很重要，后面必用

上图效果不佳，看下图：

完整代码：

4.2.perspective 和 transform-style 区别

（1）perspective 有继承性 ，可以给父元素，爷爷辈的添加
（2）transform-style 没有继承性，只能给要保持3D效果的元素的直接父元素添加

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加

1. 私有前缀

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

2. 提倡的写法

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;