CSS TRANSFORMS · 097

CSS 3D Card Studio

カードを回して、視点・奥行き・裏面の違いを見る。

01

LIVE 3D STUDIO

カードを操作して、3Dの設定を比べる

CLICK TO FLIP
studio.local / 3d-cardINTERACTIVE STAGE

THE SCENE

表裏のあるカードを、視点から見る。

PERSPECTIVE SCENE
DRAG THE CONTROLS · CLICK THE CARD
CARD ROTATION通常位置
CHILDREN3Dの奥行き

親 perspective で視点を設定

カード transform-style で子要素の奥行きを設定

表・裏 backface-visibility で裏向きの面を制御

02

HOW IT WORKS

3Dカードを作る3つの設定

01 / SCENE

親要素に視点を置く

perspective は見る位置までの距離、perspective-origin は視点の位置を決めます。

02 / CARD

子要素の奥行きを残す

transform-style: preserve-3d にすると、前面から浮かせたラベルの奥行きを保てます。

03 / FACES

裏向きの面を隠す

表面と裏面に backface-visibility: hidden を指定すると、反対側を向いた面は見えなくなります。

実装時の注意：preserve-3d の要素に opacity: .9 や filter を付けると、子要素が平面化される場合があります。MDNの条件を見る ↗

参考：perspective · perspective-origin · backface-visibility