「transform:scale」が親に適用されると、「overflow:hidden」が子要素をクリップするのはなぜですか?

transform:scale によるオーバーフローとズーム効果の処理

CSS3 変換を使用する場合、transform:scale とオーバーフローを組み合わせると、不可解な問題が発生します。 : 親コンテナ上の非表示と境界半径。観察されたように、子要素は親の境界を越えて拡張しているようで、見苦しいオーバーフローを引き起こしています。

問題を理解する

この奇妙な動作は、スケーリングが変換: スケールは要素のレンダリング サイズに影響しますが、表示ツリー内の実際のフローには影響しません。したがって、overflow: hidden が親に適用されると、元のスケールされていないサイズに基づいて子要素をクリップしようとします。これにより、予期しないクリッピングが発生します。

解決策の検索:transform:translateZ(0)

この問題に対処するために、CSS パフォーマンス テクニックでは、transform:translateZ(0) を追加することを提案しています。ラッパー要素に。これにより、ブラウザーは要素を 3 次元のレンダリング スペースを持つものとして扱い、意図したズーム効果を変更することなくオーバーフローの問題を解決します。

追加リソース

変換:translateZ(0) の CSS パフォーマンスへの影響に関する詳細情報については、次のリソースを参照してください:

• [CSS パフォーマンス:translateZ(0)](https://css-tricks.com /myth-busting-css-performance-translatez-0/)
• [CSS の translationZ プロパティについて](https://developer.mozilla.org/en-US/docs/Web/CSS/transform- function/translateZ)

以上が「transform:scale」が親に適用されると、「overflow:hidden」が子要素をクリップするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。