在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中设置数据属性,然后使用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/

http://stackoverflow.com/questions/20061774/rotate-an-image-in-image-source-in-html

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:在html中的图像源中旋转图像