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