Rotate an image in image source in html

Question

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.

Answer 1

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/

Answer 2

You can do this:

<img src="your image" style="transform:rotate(90deg);"> 

it is much easier.