How can I put a rotated image in a container?

Question

Using CSS3, HTML (and javascript / jquery if necessary), I need to rotate the image 90/270 degrees and have its position to fill the parent div / container. It sounds simple, but when the images rotate, the changes in position change, and I cannot understand how and why.

Here is the jsFiddle explanation - http://jsfiddle.net/UPGkU/2/ - I just want the blue logo to be exactly in the red div.

Of course, I could use specific offsets, but if a different image is used, these offsets change, so I really want to find a common solution.

Any help would be fantastic, thanks!

Answer 1

You need to set transform-origin - in this scenario - the point around which the image rotates.

 #image { -webkit-transform: rotate(90deg); -webkit-transform-origin: 0 0; //initially 50% 50% margin-left: 100%; } 

90deg violin / 270deg violin

Update:

The problem with the latter is that we cannot really change transform-origin , since its position refers to an element that has not yet been converted, and we cannot just set margin-top:100% , since margin values ​​(even vertical ones) are calculated as the percentage is always relative to the width of the containing block . The following code should work:

 #image { -webkit-transform: rotate(-90deg); -webkit-transform-origin: 0 0; position:relative; top:100%; } 

Answer 2

try

 #image { -webkit-transform: rotate(90deg); -webkit-transform-origin: 0 100%; position : relative; top : -50px; } 

Answer 3

Hi, now used for this css used position

 #wrapper { width:50px; height:150px; border:2px solid red; position:relative; } #image { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); position:absolute; left:-49px; top:50px; } 

Demo