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

Question

我有一个简单的3D变换,Chrome可以正确渲染,但在Firefox中,似乎在变换元素的左上角附近倾斜.

下面是将鼠标悬停在Firefox调试器中的transform属性上时的视图.红色形状是我正在尝试转换的元素,显示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 处理 CSS 属性的不同方式有关transform-origin；请参阅我对此问题的回答以获取更多解释。

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