Safari 中的 CSS 转换变换 z-index 冲突（适用于 Chrome / FF）

Question

我正在使用 CSS 过渡和旋转效果来显示名片。我在 Chrome 和 FF 中一切正常，但在 Safari 中它扭曲了 div。

我尝试应用以下属性无济于事：

transform: translateZ(0px);
transform-style: flat;
transform: translate3d(0,0,0);

有关代码和图片，请参阅Codepen：

苹果浏览器：

铬合金：

Answer 1

我相信这是堆叠引用和 CSS 转换冲突的问题。

尝试添加：

-webkit-transform: translate3d(0,0,0); 

到你的卡片的父元素。这应该形成转换后的孩子以遵守 z-index 堆叠。

如果其他人对此有一些意见，那就太好了。