2012-09-11 14 views
6

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.Döndürülen görüntüyü bir kapsayıcıya nasıl yerleştirebilirim?

İş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ı -

+0

i bu http istiyorum düşünüyorum pozisyon için kullandı://jsfiddle.net/UPGkU/5/ –

cevap

1

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

+0

+1, eğer sadece bu daha genel yapılabilirse (ör. piksel cinsinden boyutlara güvenmeden) –

8

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%; 
} 
+1

Çözümü tercih ederim: +1. Resim boyutunda bağımlı değil – fcalderan

+1

+1. Belki de 'dönüşüm-menşe' için başlangıç ​​değerinin '% 50% 50' olduğunu belirtmekte fayda var. – Ana

+0

ah, ancak 270 derece döndürürsem çözelti kopar. 90 veya 270 derece döndürülürse kırmızı kabın içine sığabileceği bir yol var mı? Cevap 'hayır' ise, bu iyi! –

0

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

İlgili konular