CSS3 背面可視属性とオーバーフロー属性の競合について_html/css_WEB-ITnose

最近、反転エフェクトを作成しているときに、backface-visible: hidden; overflow: hidden を設定した後、要素の裏側が 180 度反転しても非表示にならないという奇妙な問題を発見しました。オーバーフローは、transform. -style:preserve-3d 属性を上書きし、次の要素により、transform-style:preserve-3d が失敗します:

参照アドレス: http://codepen.io/thebabydino/details /rACbl

オーバーフローを設定しないでください: 3D 変換された子を持つ要素では非表示になります

By Ana Tudor

説明

カードの「裏面」面には回転がありますY(180度)セット両方の面に backface-visibility: hidden が設定されています。親 (カード) で overflow: hidden を設定すると、3D 変換された面 (「背面」面) が消え、もう一方の面では backface-visibility: hidden が無視されます。

仕様 (リンク) より:

次の CSS プロパティ値では、適用する前にユーザー エージェントが子孫要素のフラット化された表現を作成する必要があるため、transform-style:preserve-3d の動作をオーバーライドします。 :

overflow:visible 以外の任意の値。

filter: none 以外の任意の値。

clip: auto 以外の任意の値。

clip-path: none 以外の任意の値。

isolation: isolate の使用値。

mask-image: none 以外の任意の値。

mask-box-source: none 以外の任意の値。

mix-blend-mode : 通常以外の任意の値。

transform-style の計算値は影響を受けません。