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    lt img id  image canv  src   image png  rotate  90  gt    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

User · Accepted Answer

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/

User · Answer

This CSS seems to work in Safari and Chrome   div div2   -webkit-transform rotate 90deg      Chrome  Safari  Opera    transform rotate 90deg      Standard syntax        and in the body    lt div id  div2  gt  lt img src  image jpg    gt  lt  div gt    But this  and the  rotate90 example above  pushes the rotated image higher up on the page than if it were un-rotated   Not sure how to control placement of the image relative to text or other rotated images

User · Answer

This might be your script-free solution  http   davidwalsh name css-transform-rotate  It s supported in all browsers prefixed and  in IE10-11 and all still-used Firefox versions  unprefixed   That means that if you don t care for old IEs  the bane of web designers  you can skip the -ms- and -moz- prefixes to economize space   However  the Webkit browsers  Chrome  Safari  most mobile navigators  still need -webkit-  and there s a still-big cult following of pre-Next Opera and using -o- is sensate

User · Answer

You can do this    lt img src  your image  style  transform rotate 90deg    gt    it is much easier

[html] Rotate an image in image source in html

Examples related to html

Examples related to image

Examples related to rotation

Examples related to src