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

Question

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

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

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

Answer 1

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

变换是用于旋转/平移对象（元素）的简单坐标事物。
变换原点设置您平移/旋转对象的点。

例如，您想将 div 围绕 x 轴（水平轴）旋转 45 度。
你用transform:rotateX(45deg);

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

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

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

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

Answer 2

perspective-origin 属性：- 设置 3D 元素的基本位置。perspective-origin CSS 属性决定了查看者正在查看的位置。它被透视属性用作消失点。

transform-origin 属性：- 设置旋转元素的基本位置