Rotate an Image in Image Source in Html
Is There a Way I Could Add in the Source of My Image Codes That Could Rotate My Image? Something Like This: I'm Making My Images Dynamic, So I Was Wondering If...
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.
4 Answers
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:
You can do this:
<img src="your image" style="transform:rotate(90deg);">
it is much easier.
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.
This might be your script-free solution:
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.
Robert Thorne covers electric vehicle innovations, autonomous driving systems, global mobility trends, and automotive engineering developments.
