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

Question

我正在玩CSS过渡和旋转效果来显示名片。我在Chrome和FF中都能正常运行，但在Safari中它会扭曲div。

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

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

请参阅Codepen下面的代码和图片：

Safari中：

铬：

Answer 1

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

尝试添加：

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

到您卡片的父元素。这应该形成转换后的孩子服从z指数叠加。

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

Answer 2

试

这可能与：https://bugs.webkit.org/show_bug.cgi?id=61824

有关

基本上，当您在z轴上应用3D变换时，不能再考​​虑z-index（您现在处于3维渲染平面中，使用不同的z值）。如果要切换回子元素的2D渲染，请使用transform-style: flat;。