Safari css 旋转 3d 分层问题答案

【问题标题】：Safari css rotate 3d layering issueSafari css 旋转 3d 分层问题
【发布时间】：2014-12-04 10:43:16
【问题描述】：

我正在使用 CSS3 的 transform rotateX 创建一个磁盘，上面应该有文本。但是，我在 Safari 中遇到了文本穿过磁盘的问题。你可以在这里写一个示例代码：http://codepen.io/nichmekof/pen/ZYbRgx

它在所有其他浏览器中都按我想要的方式工作，只是 Safari 导致了问题。

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

有人对解决此问题有任何想法吗？

【问题讨论】：

【解决方案1】：

我猜 safari 使用 -webkit 前缀

RESOURCE

您的问题也可以通过在文本中添加一个小旋转来解决

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

【讨论】：

【解决方案2】：

我已经找到了自己问题的答案。

只需要使用 translate3d 而不是只翻译。

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

【讨论】：