為什麼當「transform:scale」應用於父​​元素時，「overflow:hidden」會剪切子元素？

使用transform:scale處理溢位和縮放效果

在使用CSS3變換時，將transform:scale與overflow組合時會出現一個令人費解的問題：父容器上的隱藏和邊框半徑。據觀察，子元素似乎超出了其父元素的邊界，導致難看的溢出。

理解問題

這種奇怪的行為源於以下事實：透過縮放變換：縮放影響元素的渲染大小，但不影響其在顯示樹中的實際流動。因此，當overflow:hidden應用於父元素時，它會嘗試根據子元素的原始未縮放小來裁切子元素。這會導致意外的剪切。

尋找解決方案：transform:translateZ(0)

要解決此問題，CSS 效能技術建議加入transform:translateZ(0)到包裝元素。這會導致瀏覽器將元素視為具有三維渲染空間，從而在不改變預期縮放效果的情況下解決溢位問題。

其他資源

對於有關轉換：translateZ(0) 對CSS 性能影響的更多詳細信息，請參閱以下資源：

• [CSS 效能：translateZ(0)](https://css-tricks.com /myth-busting-css-performance-translatez-0/)
• [了解CSS translateZ 屬性](https: //developer.mozilla.org/en-US/docs/Web/CSS/transform-函數/translateZ)

以上是為什麼當「transform:scale」應用於父​​元素時，「overflow:hidden」會剪切子元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！