5

我在执行 3d 旋转时遇到了一个有趣的裁剪问题。我正在使用以下方法旋转元素：

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

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

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

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

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

苹果浏览器

并在 Chrome 中正确设置动画 铬合金

谢谢！

4

3 回答 3

1

可能是在您使用的 safari 版本中，z-index 没有得到很好的支持Check can I use.com

于 2013-04-09T14:21:36.913 回答
1

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

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

于 2016-05-05T20:56:51.120 回答
0

已经有一段时间了，但我遇到了同样的问题，并且 actimel 与一个优雅的解决方法相关联。（尽管正如他们所说，它只适用于尚未转换为 3D 的背景元素。）

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

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

祝未来的读者好运！:)

于 2019-06-28T13:58:20.523 回答