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:

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

Is possible rotate my products image from back end, like i am imported products image as a landscape i need rotate as a portrait. — Gem, Jul 18 '17 at 11:43

score 118 · Accepted Answer · edited Dec 22 '16 at 11:42

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:

http://jsfiddle.net/verashn/6rRnd/5/

I was somewhat looking for another way to rotate the image through the server, because I'm trying to crop the image, and when I use webkit transform or jqueryrotate, there seems to be a problem with my cropper, so I was hoping I could load the image rotated. — marchemike, Nov 19 '13 at 02:46

score 95 · Answer 2 · edited May 10 '18 at 12:28

95

You can do this:

<img src="your image" style="transform:rotate(90deg);">

it is much easier.

edited May 10 '18 at 12:28

answered May 10 '18 at 11:45

user9770563

951
6
2

1

– user9770563 May 10 '18 at 11:48
3

The easiest and simplest solution really :) Thanks – Shahin Jul 27 '19 at 11:22

score 4 · Answer 3 · answered May 04 '14 at 19:36

4

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.

answered May 04 '14 at 19:36

chuckkahn

41
1

add "style="z-index: 1" to the object you're rotating and style="z-index: 2" (or any number higher than 1) to the text or whatever you want to display on top. – user3241874 Nov 14 '20 at 14:21

score 1 · Answer 4 · answered Nov 19 '13 at 02:43

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.

Rotate an image in image source in html

4 Answers4

Linked

Related