Compassを使って要素を回転させる処理をしたいなと調べていたら、まさにこの要望を補助してくれるツール「CREATE CSS3」を発見したのでご紹介します。

Webツール『CREATE CSS3』

Create CSS3 – Easy CSS3 Generator & SASS Compass CSS3 Generator

Generate CSS3 and SASS Compass CSS3 code quickly and easily with Create CSS3. Generates CSS3 for all the major browsers (Safari, Chrome, ...

使い方はとっても簡単です。上にある「CSS3/Sass Compass」のスイッチで生成するコードを選び、左のメニューから使いたいCSSプロパティを選ぶだけ。

左のメニューはアコーディオン形式になっており、クリックして開くと各プロパティの調整ができます。

メニューをクリックすると自動的にコードが生成されます。この白背景部分はエディタにもなっており、自分で削除したり改変したりできます。良いですね。またプレビュー部分も自動的にアニメーションするのでどのような結果になるのか分かりやすいです。

CSS3バージョンでは自動的にベンダープレフィックスを付けてくれますし、これは今後使わない手がなさそうです。特にSass & Compassユーザーなら重宝するのではないでしょうか。