CSS

Cascading Style Sheets backface-visibility property.

backface-visibility

　backface-visibilityプロパティは、3D空間で変形した要素の背面の表示方法を指定します。x軸、y軸を基準に回転した場合などで、要素の背面を描画するかを選択できます。

初期値
visible
継承
なし
適用される要素
変形の対象要素
モジュール
CSS Transforms Module Level 1

値の指定方法

visible
要素の背面を描画して、内容が裏返しに見えるように表示されます。
hidden
要素の背面を描画せず、要素自体がないように表示されます。

Sample

backface-visibility: visible; の場合。（初期値）

Yugien

backface-visibility: hidden; の場合。

Yugien

HTML source


<p>backface-visibility: visible; の場合。（初期値）</p>
<p class="sample bfv1">Yugien</p>
<p>backface-visibility: hidden; の場合。</p>
<p class="sample bfv2">Yugien</p>

CSS source


@keyframes rotater {
	0% {transform: rorateY(0deg);}
	100% {transform: rotateY(360deg);}
}

.sample {
	width: 180px;
	background-color: palegreen;
	color: green;
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	animation: rotater 10s infinite ease 1s;
}

.bfv1 {
	backface-visibility: visible;
}

.bfv2 {
	backface-visibility: hidden;
}