Question

我正在尝试使用css3 / javascript进行立方体旋转，并观察Safari与其他浏览器之间的差异。我已经在stackoverflow上阅读了一些关于它的帖子，但我没有设法解决我的问题。

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

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

我在这里创建了一个codepen：https://codepen.io/3MO/pen/eWZLNG

我的问题是，它适用于Chrome和Firefox，但Safari会缩小显示的脸部。它似乎来自css属性perspective。如果我删除它，没有缩放，它在浏览器之间是一致的，但我在旋转期间有点失去了...透视。

我在这里创建了另一个codepen来显示没有透视的结果：https://codepen.io/3MO/pen/XRdPmV

如果perspective属性没有任何缩放效果，我怎样才能在Safari下进行良好的旋转？

有没有办法让所有浏览器之间的实现保持一致？

谢谢！