backface-visibility:要素が裏面を向いた時に可視化するかどうかを指定する

初期値 visible
適用対象 変形可能な要素
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

backface-visibilityプロパティの説明

backface-visibilityは、要素が回転して裏面がスクリーンに面した時、その要素を表示させるかどうかを指定します。通常、ひっくり返った要素は内容が左右反転して表示されます。これは三次元空間の表現であり、視点を持たない二次元の座標変換では効果がありません。

このプロパティが必要になる場面としては、例えばカード型のUIを用意してユーザーの操作に応じて立体的な動きを表現したり、箱の中を覗くアニメーションを用意する場合です。この時、要素の裏面を見せるか見せないかで、表現が大きく異なります。

backface-visibilityに指定できる値

visible
要素の背面が画面に向いた時、内容を可視のままにします。これが初期値です。
hidden
要素の背面が画面に向いた時、内容を不可視にします。

backface-visibilityの使い方とサンプル

backface-visibilityプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
backface-visibility: visible;
backface-visibility: hidden;

/* グローバル値 */
backface-visibility: inherit;
backface-visibility: initial;
backface-visibility: revert;
backface-visibility: unset;

backface-visibilityの実例

それでは実際にbackface-visibilityプロパティの書き方を見ていきましょう。要素を反転させるスタイルを作成して、backface-visibilityの値だけを変えた場合、以下のように表示されます。

CSS
.samp_box > div {
	display: inline-block;
	margin: 10px 0 0 10px;
	padding: 5px;
	width: 100px;
	background: #ccc;
	border: 1px solid #666;
	text-align: center;
	transition: all 1s ease;
}
.samp_box > label {
	display: inline-block;
	margin-top: 10px;
	padding: 5px;
	width: 80px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background-color: #09f;
	color: #fff;
	text-align: center;
	cursor: pointer;
}
input[type="checkbox"] {
	display: none;
}
#toggle_1:checked ~ #flip_1 {
	transform: rotateY( 180deg );
	backface-visibility: visible;
}
#toggle_2:checked ~ #flip_2 {
	transform: rotateY( 180deg );
	backface-visibility: hidden;
}
HTML
<div class="samp_box">
	<input type="checkbox" id="toggle_1">
	<label for="toggle_1">切り替え</label>
	<div> id="flip_1">表と裏</div>
</div>
<div class="samp_box">
	<input type="checkbox" id="toggle_2">
	<label for="toggle_2">切り替え</label>
	<div id="flip_2">表と裏</div>
</div>
表示確認

要素を裏返した時に隠すメリットは、その状態に別の要素やスタイルを用意できることです。次の例では、二つの要素を重ねて表と裏で表示する内容やスタイルを変えた場合の挙動を確認できます。

CSS
.samp_box {
	position: relative;
}
.samp_box > div {
	position: absolute;
	top: 10px;
	left: 90px;
	padding: 5px;
	width: 100px;
	border: 1px solid #666;
	text-align: center;
	transition: all 1s ease;
	backface-visibility: hidden;
}
.samp_box > label {
	position: absolute;
	top: 10px;
	left: 0px;
	width: 80px;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background-color: #09f;
	color: #fff;
	text-align: center;
	cursor: pointer;
}
#flip_1 {
	z-index: 2;
	background: #fff;
}
#flip_2 {
	z-index: 1;
	background: #ccc;
	transform: rotateY( 180deg );
}
input[type="checkbox"] {
	display: none;
}
#toggle:checked ~ #flip_1 {
	transform: rotateY( 180deg );
}
#toggle:checked ~ #flip_2 {
	transform: rotateY( 0deg );
}
HTML
<div class="samp_box">
	<input type="checkbox" id="toggle">
	<label for="toggle">切り替え</label>
	<div id="flip_1">表の面</div>
	<div id="flip_2">裏の面</div>
</div>
表示確認

backface-visibilityに関連するCSSプロパティ

変形・トランスフォーム
backface-visibility 要素が裏面を向いた時に可視化するかどうかを指定する
perspective 三次元的に配置された要素の遠近感を指定する
perspective-origin 三次元的に配置された要素に対する視点の位置を定める
transform 要素に座標変換を適用して移動、回転、拡大縮小、歪みなどを行う
transform-origin 要素を座標変換させる時の原点を指定する
transform-style 変形可能要素が配置される空間の次元を切り替える