css - Safari css 旋转 3d 分层问题

Question

我正在使用 CSS3 的变换 rotateX 创建一个磁盘，上面应该有文本。但是，我在 Safari 中遇到了一个问题，即文本会穿过磁盘。您可以在此处查看它的代码笔示例:http://codepen.io/nichmekof/pen/ZYbRgx

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

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

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

Answer 1

我猜 safari 使用 -webkit 前缀

RESOURCE

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

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