backface-visibility - 要素の裏面を表示するか指定する

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのbackface-visibilityは、要素の裏面を見せるか否かを指定するためのプロパティです。

サンプルコード

backface-visibilityを指定したサンプルコードです。このプロパティは、transformを利用して、要素を裏返しにした時じゃないと意味がありません。

div {
	backface-visibility: hidden ;
}

デモ

分かりやすいように、常時、アニメーションで水平方向に回転させています。上の要素にだけ、backface-visibilityの値にhiddenを指定しました。通常は下の要素のように、一周する過程で反転した裏側を確認することができます。裏側の時は文字が反対になるので分かると思います。しかし、上の要素は裏面が非表示になっています。

RUN
HTML
CSS
JavaScript

<div class="parent"> <div id="element-1" class="child"> <p>hidden</p> </div> <div class="axis"></div> </div> <div class="parent"> <div id="element-2" class="child"> <p>visible</p> </div> <div class="axis"></div> </div>

#element-1 { backface-visibility: hidden ; } .parent { margin: 40px auto ; width: 100px ; height: 100px ; border: 1px solid #000 ; position: relative ; } .child { background: #D36015 ; -webkit-animation: spin 2s linear infinite ; animation: spin 2s linear infinite ; } p { margin: 0 ; color: #fff ; line-height: 100px ; text-align: center ; font-size: .8rem ; } .axis { position: absolute ; top: -10px ; left: 49px ; width: 2px ; height: 120px ; background: #000 ; } @-webkit-keyframes spin { 0% { -webkit-transform: rotateY( 0deg ) ; } 100% { -webkit-transform: rotateY( 360deg ) ; } } @keyframes spin { 0% { transform: rotateY( 0deg ) ; } 100% { transform: rotateY( 360deg ) ; } }

値の指定

指定できる値の説明は下記の通りです。リンクをクリックするとデモを確認できます。

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`backface-visibility`には、`body`に指定された値(`hidden`)が引き継がれる。
initial	プロパティの初期値が適用される。この場合、値は`visible`(裏面を表示)となる。
visible	初期値。裏面を表示する。
hidden	裏面を非表示にする。

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。

Chrome
●
-
時期不明
Firefox
●
-
時期不明
Safari
●
-
時期不明
Ie
●
-
時期不明
Edge
●
-
時期不明
Opera
●
-
時期不明
Safari(iOS)
●
-
時期不明
Ie Mobile
●
-
時期不明
Chrome
●
-
時期不明
Android
●
-
時期不明
FF Mobile
●
-
時期不明
Opera Mobile
●
-
時期不明