1

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

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

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

谢谢你的帮助 ：）

例子

4

1 回答 1

2

这是由于在同一个 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>

我在 CodePen 创建了一个示例。

于 2016-12-06T09:30:23.607 回答