Chrome で「overflow: hidden」と「border-radius」を使用すると「transform:scale」がオーバーフローするのはなぜですか?

変換のオーバーフローの問題: Chrome でのスケール

問題:

作成中にCSSのtransform:scaleを使用したズーム効果で、overflow:hiddenとborder-radiusが親に適用されると、子divが親divの境界を超えて拡張されることが判明しました。この問題は、トランジションを追加した場合でも発生しました。

解決策:

トランスフォームの追加:translateZ(0);ラッパー要素に追加することで問題が解決されました。提供されたデモで詳しく説明されているように、この手法は 3 次元 (Z 軸) を操作してパフォーマンスを向上させ、オーバーフローの問題に対処します。

以上がChrome で「overflow: hidden」と「border-radius」を使用すると「transform:scale」がオーバーフローするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。