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.
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.
You can do this:
<img src="your image" style="transform:rotate(90deg);">
it is much easier.
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.
Source: Stackoverflow.com