サンプル例1、例2、例3の内容

【例1】親div(白枠) に perspective を指定せずに、マウスホバーでボックスを回転。
A rotateY(30deg) , B rotateY(60deg)

【例2】親div(白枠) に perspective : 100px を指定し、マウスホバーでボックスを回転。
D rotateY(30deg) , E rotateY(60deg)

※ 例1では perspective を指定していないので、ボックスが回転しても上下の辺は並行のままですが、例2の方は perspective を指定しているので、奥行きがある見栄えになります。（perspectiveの起点は省略しているので白枠の親ボックスの中央になります）

【例3】親div(白枠) に perspective を指定せずに、マウスホバーでボックスを回転。
E perspective(100px) rotateY(30deg) , F perspective(100px) rotateY(60deg)

例3は例2に似てますが、各回転するBOX自体にperspectiveを指定しています。
※ transform : perspective(数値px) で親ではなく直接要素に指定。

※ 例2の方は perspective の起点 (次項のperspective-origin) の指定なしの状態なので、デフォルトのcenter centerになっている。なのでウインドウサイズによりボックスの表示位置が異なるため、回転時の角度が異なります。（確認方法はブラウザの横幅のウインドウサイズを最小状態にしてみる等）

※ 例3は 変化するオブジェクトの center center（perspective-origin指定なしのデフォルト）を起点に perspective が 指定されているため、例2と異なり、親divのサイズに関係なく、回転等の奥行きが計算されるので、ウインドウサイズにより回転の角度が変化することはありません。

例1へ

サンプル例4の内容 transformのプロパティの指定順

【例4】
G transform : perspective(100px) rotateX(45deg)
H transform : rotateX(45deg) perspective(100px)
Hの結果のように、transformのプロパティでperspectiveを指定する場合、他のプロパティより前に指定しないと、回転させてから奥行きを100pxにするというような状態になっていることが確認できるかと思います。

例4へ

サンプル例5の内容

【例5】順番の違いで変化の違いをさらに確認する例。 I transform : perspective(100px) rotateY(30deg) rotateX(45deg)
J transform : rotateY(30deg) perspective(100px) rotateX(45deg)

例5へ

おまけ「transform のプロパティの指定順を変えるとどうなる実験」

案外、気づいてない人がいるかもしれないので、transform のプロパティの指定順で変化が異なる例を紹介しておきます。
※ perspective の研究ページだけど、単純にrotateのみで比較しています。
K transform : rotateY(30deg) rotateX(45deg)
L transform : rotateX(45deg) rotateY(30deg)
rotateYとrotateXの順番を逆にしただけなんですけど、マウスホバーしてみると…。

まとめ

transform等で思ったような動きにならない場合、transformのプロパティの指定順に統一感がなく、適当に思いついた順に並べてしまっている、などが原因だったりすることもあるので注意が必要です、というのが、今回のおまけネタでした。

奥行きの深さ指定プロパティ

transform : perspective (num)

指定した要素の深度。深度num (0以上を指定) はz=0からの距離。例 transform : perspective(100px)

perspective : num

指定した要素の子要素全体の深度。深度num (0以上を指定) はz=0からの距離。例 perspective : 100px

ページトップへ