CSS: rotate image and align top left

Question

I am trying to rotate an image using CSS transform so that it remains correctly aligned inside the surrounding div , i.e. the top left corner of the image should be aligned with the top left corner of the div .

As you can see here (-> click [rotate] ), this will not work. Is there any way to fix this?

(Note that I will use this in an online application to view images, so I cannot hard copy the offset for the rotated image. There are many similar questions, but I did not find this exact question.)

Answer 1

If you want this done in CSS, this is the way:

 .rot90 { -webkit-transform: translateY(-100%) rotate(90deg); /* Safari */ -moz-transform: translateY(-100%) rotate(90deg); /* Firefox 3.6 Firefox 4 */ /*-moz-transform-origin: right top; */ -ms-transform: translateY(-100%) rotate(90deg); /* IE9 */ -o-transform: translateY(-100%) rotate(90deg); /* Opera */ transform: translateY(-100%) rotate(90deg); /* W3C */ -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 

updated demo

The trick is to rotate the image around the bottom left corner. After that, it falls 100% of the height; translate it, and now everything is in order.

To get the same effect for reverse rotation: (hover to transform)

 div:hover #myimage { -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */ -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */ -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */ -o-transform: translateX(-100%) rotate(-90deg); /* Opera */ transform: translateX(-100%) rotate(-90deg); /* W3C */ -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; } 

 <div style="border: 1px solid red;"> <img id="myimage" src="http://upload.wikimedia.org/wikipedia/mediawiki/a/a9/Example.jpg" style="border: 3px solid silver;" /> </div> 

Answer 2

Using some jQuery, you can get the offset parent, subtract from the new rotated offset and use the margin to return it to the container. It works with all corners. Here is the script .

JS:

 function rotate(elm, deg) { var offsetContLeft, offsetContTop, offsetLeft, offsetTop, newLeft, newTop; $(elm).css('transform', 'rotate('+ deg +'deg)'); // Get the container offset offsetContLeft = $(elm).parent().offset().left; offsetContTop= $(elm).parent().offset().top; // get the new rotated offset offsetLeft = $(elm).offset().left; offsetTop = $(elm).offset().top; // Subtract the two offsets. newLeft = offsetContLeft - offsetLeft; newTop = offsetContTop - offsetTop; // Apply the new offsets to the margin of the element. $(elm).css('margin-left', newLeft).css('margin-top', newTop); } $("#myrotate").click(function (e) { // pass in the element to rotate and the desired rotation. rotate('#myimage', 90); }); 

Answer 3

From the answers presented so far, I believe that there is no simpler approach than using JavaScript to “reinstall” the image. So let me share the approach I used:

 var step = 0; $("#myrotate").click( function (e) { step += 1; var img = $("#myimage"); img.css('transform', 'rotate('+ step*90 +'deg)'); // could be extended to work also in older browsers var d = img.width() - img.height(); img.css('margin-left', -d/2*(step%2)); img.css('margin-top', d/2*(step%2)); } ); 

myrotate is the id of <a> , which I use as a switch, myimage (suppose) id for img to rotate.

Try it here .

Answer 4

I don't know if there is an easier way, but you can set the edge of the image after rotation like this.

 margin:68px -66px; 

You can use js to get the width and height of the image so that it sets values ​​according to the image size. I used the manual method.

http://jsfiddle.net/YQktn/3/

EDIT:

You can always run into

 -webkit-transform-origin: 75px 75px; -moz-transform-origin: 75px 75px; -ms-transform-origin: 75px 75px; -o-transform-origin: 75px 75px; transform-origin: 75px 75px; 

as shown here: CSS "transform: rotate ()" affecting the overall design with "position: absolute" (not aligning properly)

Answer 5

I took the @Lost Left Stack example and modified it to work with all the turns and be repeated. Resets fields for repeated rotations. Also set the right and bottom margins.

 function rotateImage(elm, deg) { $(elm).css('margin-left', 0).css('margin-top', 0); $(elm).css('transform', 'rotate(' + deg + 'deg)'); // Get the container offset var offsetContLeft = $(elm).parent().offset().left; var offsetContTop = $(elm).parent().offset().top; // get the new rotated offset var offsetLeft = $(elm).offset().left; var offsetTop = $(elm).offset().top; // Subtract the two offsets. var newOffsetX = Math.floor(offsetContLeft - offsetLeft) + 1; var newOffsetY = Math.floor(offsetContTop - offsetTop) + 1; $("#a").text(newOffsetX + "-" + newOffsetY) // Apply the new offsets to the margin of the element. $(elm).css('margin-left', newOffsetX).css('margin-top', newOffsetY) .css('margin-right', newOffsetX).css('margin-bottom', newOffsetY - 4); } var rot = 0; $("#myrotate").click(function (e) { rot += 15; rotateImage('#myimage', rot); }); 

example: http://jsfiddle.net/v4qa0x5g/2/