CSSリファレンス

Tweet

backface-visibilityプロパティは3D変形時の背景を描画するかどうか指定するプロパティです。

初期値は「visible」ですが「hidden」を指定することで背景の描画を行ないません。次のサンプルでは要素をrotateY()を利用し180度回転させていますがbackface-visibility:hidden;が指定された#div2では背景が描画されません。

#div1,#div2 {
	width:100px;
	height:100px;
	margin-bottom:100px;
	background:red;
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
}
#div1{
	-webkit-backface-visibility:visible;
	backface-visibility:visible;
}
#div2{
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}

sample

iPhoneやAndroidでは3D Transformを利用することによりGPU(Graphics Processing Unit)を作動させアニメーションなどの描画を最適化する手法が取られることがありますが、その際にbackface-visibility:hidden;を合わせて指定し描画にかかる負荷を軽減するなどで利用されることもあります。

対応ブラウザ

◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
Google ChoromeとFirefoxは執筆時点での最新バージョンでの実装状況です。

参考URL

12 The backface-visibility Property - W3C

登録日 : 2013年12月17日 最終更新日 : 2013年12月17日

同じカテゴリー(Transform)のエントリー

• backface-visibility
• perspective-origin
• perspective
• transform-style
• transform-origin
• matrix3d()
• matrix()
• perspective()
• skewY()
• skewX()
• skew()
• rotate3d()
• rotateZ()
• rotateY()
• rotateX()
• rotate()
• scale3d()
• scaleZ()
• scaleY()
• scaleX()
• scale()
• translateZ()
• translate3d()
• translateY()
• translateX()
• translate()
• transform