使用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。