[解決済み] htmlの画像ソースで画像を回転させる

質問

画像のソースに、画像を回転させるようなコードを追加する方法はありますか？

このようなものです。

<img id="image_canv" src="/image.png" rotate="90">

私は画像をダイナミックにしているので、必要なら回転させるために余分なコードを付加できないかと考えていました。

解決方法は？

回転角度がかなり均一な場合は、CSSを使用することができます。

<img id="image_canv" src="/image.png" class="rotate90">

CSSです。

.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

その他、HTMLにdata属性を設定し、Javascriptで必要なスタイルを追加することでも実現できます。

<img id="image_canv" src="/image.png" data-rotate="90">

jQueryのサンプルです。

$('img').each(function() {
    var deg = $(this).data('rotate') || 0;
    var rotate = 'rotate(' + deg + 'deg)';
    $(this).css({ 
        '-webkit-transform': rotate,
        '-moz-transform': rotate,
        '-o-transform': rotate,
        '-ms-transform': rotate,
        'transform': rotate 
    });
});

デモの様子

http://jsfiddle.net/verashn/6rRnd/5/