css - css中的透视原点和变换原点有什么区别

Question

据我了解，它的外观可能是透视，而它在空间中实际移动的方式可能是原点。

我更清楚变换原点而不是透视原点。

有人可以给我链接或解释它的观点以及来源的重要性。

Answer 1

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

transform 是用于旋转/平移对象(元素)的简单坐标。
transform origin 设置您要围绕其平移/旋转对象的点。

例如您想要将一个 div 绕 x 轴(水平轴)旋转 45 度。
你使用 transform:rotateX(45deg);

div 会旋转，但您仍然会在屏幕上看到一个矩形，因为您从 z 轴没有透视地看它。

但是当你增加视角时，你会看到 div 的 3d View 。

眼睛的中心由 perspective-origin 设置。默认值为 50% 50% 表示居中。增加和减少 x 或 y 值将相应地移动您的“眼睛”。

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