備忘録的プログラミングリファレンス

backface-visibility プロパティ

 backface-visibility プロパティは、エレメントを裏から見た状態を表示/非表示にするプロパティです。
 エレメントが回転することが前提です。エレメントの回転は CSS アニメーションや JavaScript で作成します。

backface-visibility プロパティ
@keyframes mymove {
	from {
		transform: rorateY(0deg);
	}
	to {
		transform: rotateY(360deg);
	}
}

div#example{
	animation: mymove 10s infinite ease 1s;
	backface-visibility: visible;

  width:	300px;
	height: 100px;
	padding: 1em;
	background-color: green;
}

詳しくは Example を参照してください

 エレメントの裏側を鏡像で表示します。エレメントが回転しているような CSS アニメーションを表示するときに裏側が見えるようにします。

ページ内 Index

構文(Syntax)

CSS

backface-visibility:[ visible | hidden | initial | inherit ];

DOM ( JavaScript )

値の取得
object.style.backfaceVisibility
値の設定
object.style.backfaceVisibility="[ visible | hidden | initial | inherit ]"

値(Values)

Value摘要
visible初期値(default値)、裏側を表示
hidden裏側を非表示に
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)visible
継承(Inherited)no
変化(Animatable)no

Example

 backface-visibility プロパティの例です。

 CSS アニメーションによって回転します。値を visible に指定するとエレメントを裏から見た状態を表示します。