乐趣区

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 轴的缩放倍数

退出移动版