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

CSS3のrotateプロパティを使って、要素の角度を調整することができます。 これを応用して、アナログ時計を作ってみましょう。 サンプルを見る ※今回のサンプルは、CSS3の「transitionプロパティ」に対応した「Firefox」「Chrome」「Safari」でしか動作しません。

Webサイトにちょっとした動きや変化をつけるだけで、グッと魅力がアップしますよね。 そんな表現を実現する強力なCSSプロパティが transform です！ 今回は、駆け出しWebコーダーの皆さんに向けて、このtransformプロパティの基本的な使い方をやさしく解説して ...

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

test_computed_value("transform-origin", "10% center", "20px 150px"); test_computed_value("transform-origin", "20% 30px", "40px 30px"); test_computed_value("transform ...