Come posso posizionare un'immagine ruotata all'interno di un contenitore?

Question

Utilizzando CSS3, HTML (e javascript/jquery se necessario), ho bisogno di ruotare un'immagine 90/270 gradi e di avere la posizione per riempire il suo div genitore/contenitore. Sembra semplice, ma quando le immagini vengono ruotate, il posizionamento cambia e non riesco a capire come o perché.

Ecco un jsFiddle per spiegare - http://jsfiddle.net/UPGkU/2/ - Voglio solo che il logo blu sia posizionato esattamente all'interno del div rosso.

Naturalmente, ho potuto utilizzare offset specifici, ma se si utilizza un'immagine diversa, queste compensazioni cambiano, così ho davvero voglia di trovare una soluzione generica.

Qualsiasi aiuto sarebbe fantastico, grazie!

Answer 1

provare con

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

Answer 2

È necessario impostare un transform-origin - in questo scenario, un punto intorno al quale viene ruotato l'immagine.

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

90deg fiddle/270deg fiddle

Aggiornamento:

La sfida con il secondo è che non possiamo realmente modifichiamo transform-origin come la sua posizione è relativa alla non ancora trasformato elemento e non possiamo semplicemente impostare margin-top:100% poiché i valori di margine (anche quelli verticali) sono calcolati come a percentage always relative to the width of the containing block. Il seguente codice dovrebbe funzionare:

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

Answer 3

Hi ora usato a questo css utilizzato posizione

#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