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