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