在html中旋转图像源中的图像 [英] Rotate an image in image source in html

问题描述

类似这样：

有没有一种方法可以添加到我的图像代码的源代码中，以便旋转图像？

 < img id =image_canvsrc =/ image.pngrotate =90> 
  

我将图片变成动态图片，所以我想知道是否可以附加一些额外的代码来旋转如果你的旋转角度相当一致，你可以使用CSS：

$ / $> $ / $> $ / $> $ / $> b
$ b

 < img id =image_canvsrc =/ image.pngclass =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_canvsrc =/ image.pngdata-转动= 90 > 
  

示例jQuery：

 （$）$（$）$（$）$ （'+ deg +'deg）'; 
 $（this）.css（{
'-webkit-transform'：rotate，
'-moz-transform'：rotate，
'-o-transform'：rotate，
'-ms-transform'：rotate，
'transform'：rotate 
}）; 
}）; 
  

演示：

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

Is there a way I could add in the source of my image codes that could rotate my image?

Something like this:

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

I'm making my images dynamic, so I was wondering if I could append some extra code to rotate it if I want it to.

解决方案

If your rotation angles are fairly uniform, you can use 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);
}

Otherwise, you can do this by setting a data attribute in your HTML, then using Javascript to add the necessary styling:

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

Sample 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 
    });
});

Demo:

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

这篇关于在html中旋转图像源中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！