CSS で画像回転

CSS で画像を回転できないものかと調べてみた。で、CSS3 の規格でこんなの発見。

• CSS basic box model - Rotating boxes

ブロック要素を回転させる。

rotation

角度を指定。デフォールト値は 0。

rotation-point

回転軸をどこにするか指定する。デフォールト値は 50% 50%、つまりブロックの中心。

こんな風に使うらしい。

h1 {
  rotation: 45deg;
  rotation-point: bottom left;
}

こりゃいいものを見つけた。というわけで、早速 firefox 3 で試してみた。

何も起きない。

どうやら規格が新しすぎて、対応していないっぽい (Safari, Opera はどうかなぁ?)。画像回転を CSS で行なうには、もう少し待たないといけないみたい。