kkw学习css的过程,第9天，3D的初次接触

首先想要实现3D的效果。那么需要设置一个属性
ttranform3d：

第一个旋转：

当设置了transform-style: preserve-3D的时候，代表此时应用的3d场景了。

当设置使用transform-style: flat的时候，使用的是2d的转换效果。

所以，当给X设置旋转45度的时候

感觉元素有点轻微的向后，宽度不变。但是高度会变低

当设置Y旋转45的时候，想象一个东西被倾斜了，会被拉长

当Z设置了45度的时候，很像2d旋转的模样

当三个都设置了45度的时候。

对于3d的效果，感觉自己的想象力还是有一些不足。不太好形容。
有人说，首先需要确认坐标轴。利用左手法则。

但是对于我，好像并没有理解啥。
然后我想到了一个不太好的方式。自己去找一个盒子。
摆出了左右法则。
当rotateX的时候，就围绕着自己的大拇指绕一圈
当rotateY的时候，就围绕着自己的食指指绕一圈
当rotateZ的时候，就围绕着自己的中指指绕一圈
并且因为我们还没有用到渲染的3d的透视属性。所以上面的那些图画
根据自己的实验结果，就瞬间知道了，渲染的3D设计.

2、perspective

设置3D元素的可视效果范围。
目前不知道咋用，
官网说需要与transform-origin一起使用
transform-orgin：一个是X轴的初始值，一个是Y轴的初始值。默认都是50%

background-visibility

设置背面元素是否可见的。
拥有两个属性值：visible可见 hiddle不可见

当然对于3d的也还是

tanslateZ轴，

当设置Z轴的时候。就相当于，把一个元素，往后推移了多少的px

scaleZ

设置Z轴的缩放倍数