Safari css旋轉3d分層問題

我正在創建一個使用CSS3的變換rotateX的磁盤，它應該在其上面有文本。不過，我在Safari中遇到了一個問題，即文本穿過磁盤。你可以在這裏的一個示例codepen：http://codepen.io/nichmekof/pen/ZYbRgx Safari css旋轉3d分層問題

它的工作方式，我想在所有其他瀏覽器，它只是Safari導致的問題。

transform: rotateX(70deg) rotateZ(0deg);

任何人有固定的問題的任何想法？

2014-12-03 Ed Moore

我猜Safari使用的-webkit前綴

RESOURCE

也是你的問題可以通過還加入了小旋轉文本

&:nth-child(1) { -webkit-transform: rotateX(5deg) translate(20px, 280px); }

2014-12-03 09:52:13 Hebrus

這不是-webkit前綴，因爲我有autoprefixer。旋轉工作的文本的邊位，但沒有幫助底部的文字。 – 2014-12-04 02:30:27

我已經制定了要解決我自己的問題的答案。

只需要使用translate3d而不是隻是翻譯。

&:nth-child(1) { transform: translate3d(20px, 280px, 300px); }

2014-12-04 02:43:16

回答