仅在Safari中的3d变换期间剪切问题

Question

我在执行3d旋转时有一个有趣的剪裁问题。我正在使用：

旋转元素

-webkit-transform：rotate3d（0,1,1,180deg）;

在动画期间，它在Chrome，Firefox和除Safari之外的任何其他浏览器中都很好。

窗口正在剪切它后面的元素。这不应该是z索引问题，因为我已经为这些元素分配了正确的z-index。

任何人都知道在Safari中可能会导致这种情况发生吗？

这是Safari在动画期间的样子：

在Chrome中正确制作动画

谢谢！

Answer 1

可能是在您使用的safari版本中，z-index不受支持Check can I use.com

Answer 2

尝试设置旋转模式transform-style: flat的容器和新perspective。您需要更改3D渲染上下文。

这是相关答案https://stackoverflow.com/a/18167565/1663572 - 但您可能不想改变Z轴上的位置，因为它会显着改变外观。我也无法使用它。

Answer 3

已经有一段时间了，但是我遇到了同样的问题，actimel与一个优雅的解决方法有关。 （尽管正如他们所说，这只会在背景元素尚未转换为3D的情况下起作用。）

将这两行添加到背景元素（或其中包含那些元素的容器，或所有这些元素所属的类）：

-webkit-transform: translateZ(-1000px);
-webkit-perspective-origin: 100% 100% none;

祝您未来的读者好运！ ：）