変形
perspective
perspective は、子の要素を 3D で回したり動かしたりしたときに、どのくらい離れた所から見ているかを決め、遠近感を付けます。値が小さいほど近くから見ることになり、手前は大きく、奥は小さく見えます。
構文
none | <length [0,∞]>プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
perspective: 300px;
}
.box > :nth-child(2) {
transform: rotateY(50deg);
}コントロール
perspective300px
解説
値の意味
none：初期値です。遠近感を付けません。子を縦の軸で回しても、横に縮んで見えるだけです。- 長さ：見ている目から、要素の面（奥行き 0 の面）までの距離です。
100pxほどの小さな値だと強くゆがみ、1000pxほどの大きな値だとほとんど平らに見えます。負の値は書けず、1px より小さい値は 1px として描かれます。
気をつけること
- 効くのは、書いた要素の子（と、その中で 3D のまま描かれる子孫）の 3D の変形です。書いた要素そのものの
transformには効きません。1 つの要素だけに遠近感を付けたいときは、transform: perspective(300px) rotateY(50deg)のようにperspective()関数を先頭に書きます。 - どこから見るか（消失点）は
perspective-originで決めます。初期値は要素の真ん中です。 none以外にすると、transformと同じように、新しい重なりの文脈（stacking context）を作り、position: fixedの子もこの要素を基準に置かれるようになります。
このページのプレビューでは、箱の中に点線の枠（1 番目の子）と板（2 番目の子）を重ね、補助の宣言で板を縦の軸で 50 度回しています（transform: rotateY(50deg)）。