今回はCSS3でもあまり一般的に知られてないtransformプロパティについて説明します。transformプロパティは2008年の11月まではWebkit系とAppleのブラウザとSafariの独自実装でしたが、 11月以降は正式にW3CにEditors Draftとして受けいられ、現在は策定中です[1]⁠。
―視覚的変形の3大関数を深層から理解する― Web制作におけるアニメーションやインタラクションの表現で必須ともいえる transform プロパティ。その中でも頻出かつ強力な3関数scale(拡大・縮小)、rotate(回転)、skew(傾斜)は、直感的でありながら、使い ...
画像を全面に表示した直方体が完成したので、ナビゲーションがクリックされたら回転するアニメーションを作る。直方体をrotateXで90度回転させると底面が正面に変わり、正面は上面へ移動する。同様に、今度はrotateXを180度回転させると、初期状態で正面 ...
その違和感を打ち消す手法として、「ノイズ感」「ゆらぎ(揺らぎ)」の導入があります。 JavaScriptやCanvasを使えば豊かな表現が可能ですが、CSSだけでも驚くほど自然なランダム感や有機的な動きを表現可能です。