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