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`

非常符合我的预期

preserve-3d

没有开启`flat`

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

flat

设置中心点 `transform-origin`

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

transform-origin: x y z;

结语

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

放假咸鱼的第15天
微信小程序

css 3D转换

3D转换

3D移动

透视 `perspective`

正确理解