css中透视原点和变换原点之间有什么区别？

Question

据我所知,它可能看起来是透视,它实际上如何在它的空间中移动是起源.

我对变换起源更加清晰,而不是透视起源.

有人可以给我链接或解释它的观点和起源的重要性.

Answer 1

perspective用于设置元素子元素的视角.
透视原点是您从中查看元素的空间点

transform是用于旋转/转换对象(元素)的简单坐标事物.
transform origin设置您正在翻译/旋转对象的点.

例如,您想围绕x轴(水平轴)旋转45度的div.
你用transform:rotateX(45deg);

div会旋转但你仍然会在屏幕上看到一个矩形,因为你从z轴看它没有透视.

但是当你增加透视图时,你会看到div的3d视图.

你眼睛的中心是由perspective-origin.默认值是50% 50%指中心.增加和减少x或y值将相应地移动你的"眼睛".

另一方面,变换原点设置变换点,例如,如果你需要围绕其中心以外的任何其他点旋转矩形,你将使用transform-origin属性