3D转换

3D移动

其实对比2D就多了个translateZ()

用法：

transform:translateX();
transform:translateY();
transform:translateZ();
transform:translateX() translateY() translateZ();
transform:translate(x,y,z);//简写的方法

z轴 垂直纸面 向外为正方向（面向自己） 向内（背向自己）

简写的方式，xyz 每一个值无法省略。

透视 perspective

如果我们单单设置translateZ() 是没有效果的，网页有3D效果 那么必须要有 透视属性（设置观察点）。

透视其实理解成视距更好，透视指的是 人的眼睛里屏幕的距离，perspective是给父元素设置的

有了这张图 外面外加一点想象 ，如果 视距越大 那么屏幕上是不是就图形在屏幕上越小哇，那么视距越小 就越大

• perspective 越大 图形越小
• translateZ(n) n越大 图形越大

上面的都是我个人的理解，其实还有错误的地方，这里我默认 z轴的值大于0，错误的理解我放出来就是来警醒我自己的。

正确理解

perspective指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果

z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由perspective的值决定

3D旋转

transform:rotateX(45deg);//沿着X轴旋转
transform:rotateY(45deg);//沿着Y轴旋转
transform:rotateZ(45deg);//沿着Z轴旋转
transform:rotate3d(x,y,z,45deg);//沿着自定义的轴旋转

首先确定正方向，我们使用左手定则 ：大拇指为正方向，那么四指就是旋转正方向。

rotate3d(x,y,z,a)

旋转轴由一组 [x, y, z] 矢量定义,这个其实举个例子就好理解了

比如说 rotate3d(0,1,1,adeg) 就是沿着向量 [0,1,1]旋转 a度 如图 ：

方向还是左手定则。

3D呈现 transform-style

transform-style这个属性是控制子元素是否开始3D空间

• transform-style:flat 子元素没有3D空间，这个也是默认值
• transform-style:preserve-3d子元素开启3D空间
• 这个属性不会被继承，所以我要设置到他的第一个父元素上面

什么？3D空间还要开启，扯淡呢 ？ 我们实践出真理一下。

这是开启后的效果preserve-3d

非常符合我的预期

没有开启flat

看到他，我就想起来 有点像 世界上第一款FPS游戏《毁灭战士》 的一些3D效果 ，或者是 《我的世界》的火焰效果

设置中心点 transform-origin

这个和2D的没有啥区别，只不过多了个z

transform-origin: x y z;

结语

文字总结不够形象 ，可以看一下 我关注的up[xiao-high]的视频，蛮不错的。

放假咸鱼的第15天