Firefox 中的 CSS 3D 变换在左上角左右倾斜

Question

我有一个简单的 3D 转换，Chrome 可以正确呈现它，但在 Firefox 中，转换后的元素的左上角似乎会发生倾斜。

下面是在 Firefox 调试器中将鼠标悬停在转换属性上时的 View 。红色形状是我要转换的元素，显示 Firefox 投影的蓝色形状实际上是正确的，但由于某种原因，红色形状与此不匹配。

这是最小代码:(codepen) :

<div style="width: 1065px; height: 1095px; perspective: 597.491px;">
    <div style="transform-style: preserve-3d; transform-origin: 50% 50% 0px; width: 1065px; height: 1095px; transform: translate3d(0px, 0px, 597.491px) matrix3d(-0.975388, -0.0931864, 0.199836, 0, 0, -0.906306, -0.422623, 0, -0.220496, 0.412221, -0.884, 0, 0, 0, 0, 1) translate3d(532.5px, 547.5px, 0px);">
        <div style="position: absolute; transform: translate3d(-50%, -50%, 0px) matrix3d(-0.001862, 0, -0.00117, 0, -0.000247, -0.00215, 0.000394, 0, 0.001143, -0.000465, -0.00182, 0, -0.519918, 0.211585, 0.827596, 1);width:760px;height:350px;background:red">
        </div>
    </div>
</div>

codepen 还显示在 Firefox 中滚动位置正在改变红色形状，而在 Chrome 中则没有:

有什么想法吗？

Answer 1

这与 Firefox 处理 transform-origin CSS 属性的不同方式有关；查看我对 this question 的回答以获得更多解释。

根据 Philip 对您的问题的评论，我建议您看看像 GSAP 这样的动画平台。 ，因为并非所有浏览器都正确处理 transform-origin。