変形
backface-visibility
backface-visibility は、3D で回して裏側がこちらを向いた要素を、見せるか隠すかを指定します。
構文
visible | hiddenプレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
perspective: 300px;
}
.box > :nth-child(2) {
transform: rotateY(150deg);
backface-visibility: hidden;
}コントロール
backface-visibilityhidden
解説
値の意味
visible：初期値です。裏側を向いても見え、中身は左右（または上下）が反転して見えます。hidden：裏側がこちらを向いている間は見えなくなります。
使いどころ
表と裏の 2 枚を重ね、裏の 1 枚をあらかじめ rotateY(180deg) で裏返しておき、両方に hidden を書くと、親ごと回したときにめくれるカードが作れます。その場合、親には transform-style: preserve-3d も書きます。
気をつけること
- 書くのは回す要素そのものです（
perspectiveのように親に書くのではありません）。 - 裏を向いているかどうかは、親の
transform-style: preserve-3dでつながった先祖の回転も合わせて決まります。
このページのプレビューでは、補助の宣言で箱に奥行き（perspective: 300px）を付け、板（2 番目の子）を縦の軸で 150 度回して、裏側をこちらに向けています。