今回はCSS3でもあまり一般的に知られてないtransformプロパティについて説明します。transformプロパティは2008年の11月まではWebkit系とAppleのブラウザとSafariの独自実装でしたが、 11月以降は正式にW3CにEditors Draftとして受けいられ、現在は策定中です[1]⁠。

CSS3で導入される機能のひとつにtransformがある。この機能を使うと要素を回転させたりスケールさせたり任意の位置へ移動させるといったことが簡単に実現できるようになる。特に回転やスケールはこの機能を示すわかりやすい機能であるため、さまざまな ...

transformで、translate、rotate、scaleをまとめて操作したい場合、順番を間違えると、中心がずれてしまったりして、思った挙動にならない。 translate、rotate、scaleの順番で指定すれば、正しく動作する transform: translate (100px,100px) rotateX (45deg) rotateY (90deg) scale (0.8); ...

画像を全面に表示した直方体が完成したので、ナビゲーションがクリックされたら回転するアニメーションを作る。直方体をrotateXで90度回転させると底面が正面に変わり、正面は上面へ移動する。同様に、今度はrotateXを180度回転させると、初期状態で正面 ...