使用 3D CSS 变换时防止元素裁剪

Question

在使用 3D CSS 变换时，我无法防止两个元素被剪裁。有没有人遇到过这个问题并找到了解决方案？

我附上了最新版本 iOS 的屏幕截图来说明问题 - 它也出现在桌面版 Safari 上，但不会出现在 OS X 上的 Chrome 上。

我理解为什么会发生这种情况，甚至在某些情况下这是正确的行为，但在不同的浏览器之间是不一致的。

感谢您的帮助:)

Answer 1

这是由于在同一个 3d 图层中渲染两个元素造成的。解决方案是在各自的层中渲染它们。

这是导致问题的代码的简化版本：

CSS：

.wrapper {
    transform-style: preserve-3d;
    perspective: 1000;
}

.rotate {
    width: 100px;
    height: 100px;
    background: grey;
    transform: rotateX(45deg);
}

.clipped-element {
    width: 30px;
    height: 30px;
    background: blue;
}

HTML：

<div class="wrapper">
    <div class="rotate">
        <div class="clipped-element"></div>
    </div>
</div>

通过使用transform-style 和perspective，我创建了一个渲染层。由于.clipped-element 是这一层的一部分，它存在于同一个 3d 空间中。

通过将被裁剪的元素移动到它自己的层中，它存在于它自己的 3d 空间中，并且避免了裁剪问题。

CSS：

.wrapper {
    width: 200px;
    height: 200px;
}

.rotate__wrapper {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    perspective: 1000;
}

.rotate {
    width: 100px;
    height: 100px;
    background: grey;
    transform: rotateX(45deg);
}

.clipped-element {
    width: 30px;
    height: 30px;
    background: blue;
}

HTML：

<div class="wrapper">
    <div class="rotate__wrapper">
        <div class="rotate"></div>
    </div>
    <div class="clipped-element"></div>
</div>

我创建了an example on CodePen。