wde

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

2009-06-03 08:09:28

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

その点、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
※このエントリは builder メンバーにより投稿されたものです。朝日インタラクティブ および builder編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ