“backface-visibility”プロパティ:要素の裏面の非表示｜CSS－havin' a coffee break

＃

概要

初期値	“backface-visibility: visible;”
適用対象	変形可能要素
継承	No
パーセント値	パーセント値は指定できません
計算値	指定した値
アニメーション	離散

“backface-visibility”プロパティは要素の変形する“transform”プロパティによって三次元変形された要素が裏面を向けている場合に表示するかを指定するプロパティです。

既定では三次元変形された要素は表と裏の両面に同じコンテンツを表示し、三次元変形によって要素が裏返されると表面の鏡像のように描画されます。しかし、2つの要素を背中合わせにする場合などには裏面が表示されると不都合になることがあり、“backface-visibility”プロパティによって裏面を透明にすることができます。

要素の変形に使用される累積三次元変形マトリクスの“m33”成分が負の数である場合に要素は裏面を向けていると判断されます。

サンプルコード



div { backface-visibility: hidden;}

＃

値

値	説明
visible	要素が裏面を向けている時も表示する (裏面は表面の鏡像のようになります。)
hidden	要素が裏面を向けている時は表示しない
共通キーワード

＃

仕様書

定義されている仕様書



backface-visibility



content-box
border-box

＃

裏面を表示する



.sample-inner-box-backface-visible {


 backface-visibility: visible;

 animation: 2s linear infinite SampleRotation;

 
}





@keyframes SampleRotation {


  0% { transform: rotateY(0deg); }

  100% { transform: rotateY(360deg); }


}

＃

裏面を表示しない



.sample-inner-box-backface-hidden {


 backface-visibility: hidden;

 animation: 2s linear infinite SampleRotation;

 
}





@keyframes SampleRotation {


  0% { transform: rotateY(0deg); }

  100% { transform: rotateY(360deg); }


}