html - 需要帮助理解 transform-origin 和 perspective-origin 差异的原因

Question

工作中遇到了一些事情，想了解一下。

我复制了网站标题的 HTML 并将其放在我自己的网站中(我无法提供指向我网站的链接，因为它位于私有(private)服务器上)。我还包含了我正在复制的站点的所有 CSS 文件。一切看起来都一样，除了我网站上的几个小点更高。

我调查后发现，那些地方都是 img 元素是 a 元素的子元素的地方。我在我的网站和我正在复制的网站上都运行了 Inspect Element 并发现这些 a 和 img 标签具有完全相同的 规则 和计算，但a 在我的网站上都比3px 高。

我决定比较所有浏览器样式，虽然我预计不会有什么不同，因为当然，我一直在同一个浏览器中进行比较。好吧，事实证明，在我的网站上，a 对 transform-origin 和 perspective-origin 具有不同的属性。直到现在我才听说过这些属性，而且 Firefox 也没有将它们显示为来自任何 CSS 文件。

谁能解释一下？

Answer 1

简单总结一下:

透视原点 是您在空间中观察物体的点，而变换原点负责设置您对对象进行旋转或平移的点。

您应该注意到，perspective 负责为给定元素的子元素设置视角，因此可以解释这些属性的细微差别。