Question

我目前正在尝试使用CSS3进行3D变换。我知道不是每个浏览器目前都支持3D变换，但是，我注意到浏览器之间元素位置的显着差异。在Safari中，元素完美排列在我期望的位置。但在Chrome中，该元素的关闭时间为100像素。

我在网上找不到任何信息证实，但经过一些调查后，似乎在Safari中，X轴原点位于窗口的最左侧，而在Firefox和Chrome中，X- Axis位于窗口的死点（FYI，Y轴和Z轴在这三个浏览器之间具有相同的原点。

关于如何纠正这个问题的任何想法？

以下是相关的CSS：

#container {
  -webkit-perspective: 1200px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective: 1200px;
  -moz-perspective-origin: 50% 50%;
}

#cube {
  -webkit-transform: translate3d(438px,137px,-282px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -webkit-transform-style: 3d-perspective;
  -moz-transform: translate3d(438px,137px,-282px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -moz-transform-style: 3d-perspective;
}

Answer 1

...好的

经过几个小时的修补后，我想出来了，并希望发布我的答案，因为这些信息可能有助于其他人。

发生的事情是，在#cube所在的div中（让我们称之为#wrapper），我将css属性“text-align”设置为居中。在Firefox和Chrome中，该设置将Y轴的原点设置为屏幕的中心（即#wrapper的中心，因为#wrapper是屏幕的宽度。）但是，Safari不会将该属性设置为它的三维变换计算（也可能是二维变换，虽然我不会明确地说。）我所要做的就是删除那个属性 - 并且presto！

CSS3转换在浏览器之间的不同操作

1 个答案: