CSSでテキストを回転させて、スタイリッシュな日付表にする方法[CSS]

snook.caより、CSSでテキストを回転させて、スタイリッシュな日付表にする方法の紹介です。

使うCSSプロパティは下記になっています。

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);
css0908031.jpg

上図のようにするためのマークアップは下記になります。

<div class="example-date">
  <span class="day">31</span> 
  <span class="month">July</span> 
  <span class="year">2009</span>
</div>

IE向けはfilterプロパティです。

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

ただし、これは、Firefox3では、動作しません、Firefox3.5、Safari3.1以上で動作します。