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

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

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

[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