This article contains 2 images. You will find them at the very end of the article.

This article contains 98 words.

WDE08 Blog: スマートなCSS3 transformのテクニック

• 菊池
• 2009年6月3日
• 5:09 PM
• XHTML スポンサーについて ブラウザ 進行状況

素晴らしい技術や製品は自身の範疇を超えていて、しばしばイマジネーションが追いつかないことがあります。それゆえか、最初は批判的に捉えてしまったりして、習得したり普及するのに時間がかかったりします。

その点、CSS3も自分の範疇を超えてる事が多く似ています。実践的な使い方がわからず便利さが分からない事もしばしば。自分の中ではCSS3のtransformは特にそんな感じでした。

でも、ClearleftのNatalieがみせてくれたtransformの実装方法は、非常に実践的で素晴らしいものです。ポケットリファレンスを印刷時はCSS3のtransformを利用し90度回転させるというもの。元はBrian Sudaの発想みたいです。

非常に賢いですね。

/* rotated left */ #page1, #page8, #page7, #page6 { -webkit-transform: translate(64.5px, -64.5px) rotate(-90deg); -moz-transform: translate(64.5px, -64.5px) rotate(-90deg); transform: translate(64.5px, -64.5px) rotate(-90deg); /*-webkit-transform:rotate(90deg) scale(0.6) skew(-23deg);*/ }

下記の図はスクリーンショットです。

ブログエントリー http://natbat.net/2009/May/23/terminal-reference/#c5394 実際のデモ http://natbat.net/code/clientside/css/pocketbook/pocketHelp.html githubで公開されているソース http://github.com/natbat/pocketbook/tree/master