¿Cómo puedo colocar una imagen girada dentro de un contenedor?

Question

Usando CSS3, HTML (y javascript/jquery si es necesario), necesito rotar una imagen 90/270 grados y colocarla para llenar su div principal/contenedor. Suena simple, pero cuando se rotan las imágenes, el posicionamiento cambia y no puedo entender cómo o por qué.

Aquí hay un jsFiddle para explicar - http://jsfiddle.net/UPGkU/2/ - Solo quiero que el logotipo azul se coloque exactamente dentro del div rojo.

Por supuesto, podría usar compensaciones específicas, pero si se usa una imagen diferente, esas compensaciones cambian, así que realmente quiero encontrar una solución genérica.

¡Cualquier ayuda sería fantástica, gracias!

Answer 1

tratan con

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

Answer 2

Es necesario establecer un transform-origin - en este escenario, un punto alrededor del cual la imagen se gira.

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

90deg fiddle/270deg fiddle

Actualización:

El reto con este último es que en realidad no podemos modificar transform-origin ya que su posición es relativa a la aún no transformados elemento y no podemos simplemente establecer margin-top:100% ya que los valores de margen (incluso los verticales) se calculan como a percentage always relative to the width of the containing block. El siguiente código debería funcionar:

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

Answer 3

Hola ahora utiliza a este css utiliza posición

#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