How can I position a rotated image within a container?

Question

Using CSS3, HTML (and javascript/jquery if needed), I need to rotate an image 90/270 degrees and have it position to fill its parent div/container. Sounds simple, but when images are rotated, there positioning changes and I can't figure out how or why.

Here is a jsFiddle to explain - http://jsfiddle.net/UPGkU/2/ - I just want the blue logo to be position exactly within the red div.

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

Any help would be fantastic, thanks!

Answer 1

You need to set a transform-origin - in this scenario, a point around which the image gets rotated.

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

90deg fiddle / 270deg fiddle

Update:

The challenge with the latter is that we can't really modify transform-origin as its position is relative to the not yet transformed element and we can't just set margin-top:100% since margin values (even vertical ones) are calculated as a percentage 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 with

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

​