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

【问题标题】：CSS 3D transform in Firefox is skewed around the top leftFirefox 中的 CSS 3D 变换在左上角倾斜
【发布时间】：2015-06-16 04:46:41
【问题描述】：

我有一个简单的 3D 变换，Chrome 可以正确渲染，但在 Firefox 中，变换元素的左上角似乎偏斜。

下面是在 Firefox 调试器中将鼠标悬停在转换属性上时的视图。红色形状是我要转换的元素，显示 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 中则没有：

有什么想法吗？

【问题讨论】：

GSAP 会做什么？

标签： css firefox 3d

【解决方案1】：

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

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

【讨论】：