指定せずに、マウスホバーでボックスを回転。指定し、マウスホバーでボックスを回転。指定しているので、奥行きがある見栄えになります。指定せずに、マウスホバーでボックスを回転。rotateY(60deg)例3は例2に似てますが、各回転するBOX自体にperspectiveを指定しています。親ではなく直接要素に指定。centerになっている。ウインドウサイズによりボックスの表示位置が異なるため、回転時の角度が異なります。指定されているため、例2と異なり、親divのサイズに関係なく、回転等の奥行きが計算されるので、ウインドウサイズにより回転の角度が変化することはありません。perspective(100px)Hの結果のように、transformのプロパティでperspectiveを指定する場合、他のプロパティより前に指定しないと、回転させてから奥行きを100pxにするというような状態になっていることが確認できるかと思います。【例5】順番の違いで変化の違いをさらに確認する例。プロパティの指定順で変化が異なる例を紹介しておきます。研究ページだけど、単純にrotateのみで比較しています。rotateY(30deg)rotateYとrotateXの順番を逆にしただけなんですけど、マウスホバーしてみると...。まとめtransform等で思ったような動きにならない場合、transformのプロパティの指定順に統一感がなく、適当に思いついた順に並べてしまっている、などが原因だったりすることもあるので注意が必要です、というのが、今回のおまけネタでした。(num)指定した要素の深度。num指定した要素の子要素全体の深度。ax,ay...[角度]ay省略時はaxのみの変形。