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

Question

当使用3D CSS变换时，我遇到了阻止两个元素剪切的问题。以前有没有人遇到过这个问题并找到了解决方案？

我附上了最新版本的iOS的截图来说明这个问题--桌面版的Safari也会出现这个问题，但OS上的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。