CSS3變換在不同瀏覽器之間操作

我目前正在用CSS3試驗3D變換。我意識到並非所有瀏覽器目前都支持3D變換，但是，我注意到瀏覽器之間元素佈局的顯着差異。在Safari中，元素完美地排列在我所期望的位置。但在Chrome瀏覽器中，該元素有幾百個像素。CSS3變換在不同瀏覽器之間操作

我無法找到在網絡上確證的任何信息，但經過一番調查，似乎在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; 
}

來源

2012-11-20 Brian Crawford

JavaScript是一個選項嗎？ – jpumford

可能是scss compass或更少可以統一此行爲？ – JAre

賈斯汀，一直在使用JavaScript，並願意使用JavaScript來解決這個問題。我已考慮檢查使用哪個瀏覽器，並相應地設置CSS，但我希望有一個更優雅的解決方案。 –

好吧...

經過幾個小時的修補後，我發現它並想發佈我的答案，因爲這些信息可能會幫助別人。

發生了什麼事情是，在#cube內部（我們稱之爲#wrapper）的div中，我將css屬性「text-align」設置爲居中。在Firefox和Chrome中，該設置將Y軸的原點設置爲屏幕的中心（即#wrapper的中心，因爲#wrapper是屏幕的寬度）。但是，Safari不會將該屬性變爲它的三維變換計算（可能還有二維變換，儘管我不會明確地說）。我所要做的就是刪除那個屬性 - 並且急！

來源

2012-11-21 00:51:25

我一直對Safari和Chrome之間的一些差異感到困惑。感謝您分享解決方案（也是很好的禮儀）。 – Duopixel

CSS3變換在不同瀏覽器之間操作

回答

相關問題