以前ニュースで、Google のモバイル版で「傾斜」（中国語で「傾き」の意味）と検索すると、結果のページが右に傾いて表示される、と紹介されていました。この効果はそれほど難しくありません。CSS 3 の標準の一つなので、CSS の 1 行だけで実現できます。現時点では、IE 系のブラウザはこの CSS 3 の傾きの構文に対応していません（IE 9 も含みます）。また、実際には 1 行では済まず、ブラウザごとに構文が異なるため、複数行に分けて書く必要があります。この点は今後改善されるでしょう。

はじめに：

今回使う傾きの効果は、CSS 3 の変形機能である transform によるものです。このプロパティを使えば、CSS だけで簡単なアニメーションを作れます。transform では、ブロックを傾けるだけでなく、移動、拡大・縮小、パースペクティブなどの効果も作れます。ただ、今回扱うのは回転、つまり transform のうち傾きの部分だけです。

構文：

-webkit-transform: rotate(角度);
-moz-transform: rotate(角度);
-o-transform: rotate(角度);
-ms-transform:rotate(角度)
「ほぼ」すべてのブラウザで表示されるように、この 3 行はまとめて書くのがおすすめです。もちろん、現時点では IE 系のブラウザではこの機能が表示されません（IE 9 では対応済みです）。
  • -webkit の行は、Safari や Chrome など WebKit エンジンを使うブラウザ向けです。
  • -moz の行は、Firefox や Firefox をベースにしたブラウザ向けです。
  • -o の行は、Opera 向けです。
  • -ms の行は、IE 9 向けです。
角度の単位は deg です。たとえば、img を 1 度だけ傾けたい場合の構文は次のとおりです。
-webkit-transform: roate(1deg);
サンプルファイルのダウンロード：Box.net ｜ 4Shared ｜ Google ｜ Dropbox