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 · 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:

<div id="div2"><img src="image.jpg"  ></div>

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

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

User · Answer

If your rotation angles are fairly uniform  you can use CSS    lt img id  image canv  src   image png  class  rotate90  gt    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    lt img id  image canv  src   image png  data-rotate  90  gt    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 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

[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