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

【问题标题】：CSS3 Transforms Operating Differently Between BrowsersCSS3 转换不同浏览器之间的操作
【发布时间】：2012-11-21 08:51:25
【问题描述】：

我目前正在尝试使用 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;
}

【问题讨论】：

可以选择 JavaScript 吗？
可能是scss compass或更少可以统一这种行为？
贾斯汀，一直在使用 JavaScript，并且愿意使用 JavaScript 来解决这个问题。我考虑过检查正在使用的浏览器，并相应地设置 CSS，但我希望有一个更优雅的解决方案。

标签： css firefox google-chrome 3d safari

【解决方案1】：

好吧……

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

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

【讨论】：

我也对 Safari 和 Chrome 之间的一些差异感到困惑。感谢您分享解决方案（这也是一种很好的礼仪）。