[CSS]backface-visibilityとは？

CSSで使えるbackface-visibilityプロパティ。

普段、あまり使わないプロパティだけに少し分かりづらいのも事実。

今回はサクッとbackface-visibilityの使い方を紹介していきます。

backface-visibilityとは？

簡単に説明すると要素の裏側にある要素の表示をコントロールするものになります。

ちょっと分かり辛いので下記の画像を見てください。

赤のボックスの裏側にもう一つ要素があります。

これをtransformプロパティで回転するようにしていますが、backface-visibilityを設定していないとこのようになります。

裏側の要素が回転した時に見えちゃってますね。

これにbackface-visibility: hidden;を指定あげるとこのようになります。

つまり、裏側にある要素が見えた時点で表側の要素がhidden(隠れる)ようになります。

hiddenの値の他にvisibilityもある

backface-visibilityはhiddenとvisibilityの二つの値があります。

hiddenの場合は非表示にしますが、visibilityの場合は表示にします。