Döndürülen görüntüyü bir kapsayıcıya nasıl yerleştirebilirim?

Question

CSS3'ü, HTML'yi (ve gerekirse javascript/jquery) kullanarak, 90/270 derecelik bir görüntü döndürmem ve üst div/kapsayıcısını doldurması için konumlandırmam gerekiyor. Kulağa basit geliyor, ancak görüntüler döndüğünde, konumlandırma değişiyor ve nasıl ve neden olduğunu anlayamıyorum.

İşte açıklamak için bir jsFiddle - http://jsfiddle.net/UPGkU/2/ - Sadece mavi logonun kırmızı div içinde tam olarak konumlanmasını istiyorum.

Elbette, belirli ofsetleri kullanabilirdim, ancak farklı bir resim kullanılıyorsa, bu ofsetler değişiyor, bu yüzden gerçekten bir genel çözüm bulmak istiyorum.

Her türlü yardım harika olurdu, teşekkürler! görüntü döndürülmüş olur etrafında bu senaryoda, bir noktayı -

Answer 1

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

Bir transform-origin ayarlamanız gerekir

Answer 2

ile deneyin.

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

90deg fiddle/270deg fiddle

Güncelleme:

ikincisi ile meydan henüz dönüştürülmüş değil göre pozisyonu olduğu gibi biz gerçekten transform-origin değiştiremez olmasıdır öğe ve kenar boşluğu değerleri (hatta dikey olanlar) a percentage always relative to the width of the containing block olarak hesaplandığından, margin-top:100% ayarlayamıyoruz. Aşağıdaki kod çalışması gerekir:

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

Answer 3

Merhaba şimdi kullanılan bu css

#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