Html 使用Safari转换原点和透视图

我试图在css3/javascript中旋转一个立方体，我观察到Safari和其他浏览器之间的差异。 我已经在stackoverflow上读过一些关于这方面的帖子，但我没有设法解决我的问题

我最初使用平移和旋转来定位立方体的面，并且不指定任何变换原点。 旋转立方体时，指定变换原点，使轴位于立方体的中心，然后旋转。我只是在框中添加了一个类：

.show-front {
    transform-origin: center center $transformOrigin;
    transform: rotateY(0deg);
}

我在这里创建了一个代码笔：

我的问题是，它可以在Chrome和Firefox上正常工作，但Safari会放大显示的人脸。它似乎来自css属性

透视图

。如果我删除它，没有缩放，浏览器之间是一致的，但我有点失去了。。。旋转过程中的透视图

我在这里创建了另一个代码笔来显示没有透视图的结果：

如何在Safari下进行良好的旋转，而不使用

透视图

属性带来的任何缩放效果

有没有一种方法可以使所有浏览器之间的实现保持一致

---

谢谢

您是否已将供应商前缀应用于所有CSS3属性？对于safari，它是-webkit-，我尝试过，但没有改变任何内容。我正在考虑另一种解决方案，而不是使用transform origin，在动画期间执行translateZ。今晚我将对此进行测试。@Joel你找到解决方案了吗？Hello@psikai，不确定，那是很久以前的事了，我继续前进。你是否将供应商前缀应用于所有CSS3属性？对于safari，它是-webkit-，我试过了，但没有改变任何东西。我正在考虑另一种解决方案，而不是使用transform origin，在动画期间执行translateZ。今晚我会测试一下。@Joel你找到解决方案了吗？你好@psikai，不确定，那是很久以前的事了，我继续前进。