変形
perspective-origin
perspective-origin は、perspective で遠近感を付けたときに、要素のどの位置の正面から見ているか（消失点）を指定します。
構文
<position>プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
perspective: 300px;
perspective-origin: right top;
}
.box > :nth-child(2) {
transform: rotateY(50deg);
}コントロール
四角の中をクリック・ドラッグして中心を動かせます
横の位置
縦の位置
解説
値の意味
background-position と同じ書き方で、横・縦の位置を書きます。初期値は 50% 50%（真ん中）で、% は要素の幅・高さに対する割合です。left なら要素の左端の正面、right bottom なら右下の角の正面に目を置いて、子を見ることになります。
気をつけること
- 同じ要素に
perspective（none以外）が無いと何も変わりません。 - 書くのは子を持つ要素（
perspectiveを書く要素）です。回す子の側の中心はtransform-originで決めます。
このページのプレビューでは、補助の宣言で箱に奥行き（perspective: 300px）を付け、板（2 番目の子）を縦の軸で 50 度回しています。板は右を向くように回っているので、見る位置を右に寄せると正面に近い向きから見ることになって大きく、左に寄せると斜めから見ることになって細く見えます。