【CSS Modules】backface-visibilityプロパティの使い方

backface-visibilityプロパティは、3D変換されたHTML要素の背面が表示されるかどうかを制御するプロパティです。このプロパティは、要素が3D空間内でX軸やY軸を中心に回転するなど、向きを変える際に、その要素の「裏側」をユーザーに見せるか、あるいは完全に隠すかを指定するために使用されます。

設定できる値は主に二つあります。一つ目のvisibleは、要素の背面も表示されることを意味します。要素が180度回転して裏側を向いた場合でも、表面が反転した状態で背面が見えるようになります。これがこのプロパティの初期値です。二つ目のhiddenは、要素の背面が表示されなくなる設定です。要素が裏側を向いた際には、何も描画されず、完全に透明な状態になります。

このプロパティは、カードの裏返しアニメーションや、3Dキューブのようなインタラクティブなオブジェクトを作成する際によく利用されます。通常、transformプロパティによる回転と組み合わせて使用され、より複雑な3D表現を行う場合は、親要素にtransform-style: preserve-3d;を設定することもあります。backface-visibilityを適切に活用することで、ユーザーインターフェースに奥行きのある、より没入感のある体験を提供することが可能になります。

Copy
1.element-3d-rotated {
2  backface-visibility: hidden;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません