1

我目前正在用 CSS3 试验 3D 变换。我知道目前并非每个浏览器都支持 3D 变换，但是，我注意到浏览器之间元素的放置存在显着差异。在 Safari 中，元素完美地排列在我期望的位置。但在 Chrome 中，该元素相差 100 像素。

我在网上找不到任何信息证实，但经过一番调查，似乎在 Safari 中，X 轴原点位于窗口的最左侧，而在 Firefox 和 Chrome 中，X 轴已死- 窗口中心（仅供参考，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;
}
4

1 回答 1

2

好吧...

经过几个小时的修补，我想通了，并想发布我的答案，因为这些信息可能对其他人有所帮助。

发生的事情是在#cube 所在的div 中（我们称之为#wrapper），我将css 属性“text-align”设置为居中。在 Firefox 和 Chrome 中，该设置将 Y 轴的原点设置为屏幕中心（即 #wrapper 的中心，因为 #wrapper 是屏幕的宽度。）但是，Safari 不会将该属性纳入它对 3D 变换的计算（也可能是 2D 变换，尽管我不会明确地说出来。）我所要做的就是删除该属性——然后就可以了！

于 2012-11-21T00:51:25.287 回答