html - 仅限 Safari 中的 3d 变换期间的裁剪问题

Question

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

旋转一个元素

-webkit-transform: rotate3d(0, 1, 1, 180deg);

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

窗口正在穿过它后面的元素。这不应该是 z-index 问题，因为我已经为这些元素分配了适当的 z-index。

任何人都知道是什么导致了在 Safari 中发生这种情况？

这是动画期间在 Safari 中的样子:

并在 Chrome 中正确动画

谢谢!

Answer 1

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

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