transform-origin Özelliği
transform-origin özelliği, transform özelliği ile tanımlanan öğe dönüşümlerinin gerçekleşeceği noktayı belirler.
Varsayılan olarak bu nokta - öğenin merkezidir,
ve örneğin, dönme işlemi merkezine göre gerçekleşir.
Ancak, bu davranış değiştirilebilir ve öğenin kendi kenarına, köşesine göre
veya hatta öğenin dışında bulunan bir noktaya göre dönmesi sağlanabilir.
Sözdizimi
seçici {
transform-origin: X-ekseni Y-ekseni Z-ekseni;
}
Y ve Z eksenleri için değerler zorunlu değildir, atlanabilirler (varsayılan değerlerini alırlar). Z eksenindeki nokta kayması 3B dönüşümler için gereklidir.
X Ekseni için Değerler
| Değer | Açıklama |
|---|---|
| CSS birimleri | Değer, dönüşüm merkezinin öğenin sol kenarından olan mesafesini belirleyen herhangi bir boyut birimi olabilir. Pozitif bir değer, dönüşüm merkezini sağa doğru (öğenin içine) kaydırır, negatif bir değer ise sola doğru (öğenin dışına) kaydırır. |
left |
Yatayda dönüş noktası öğenin sol kenarında. |
right |
Yatayda dönüş noktası öğenin sağ kenarında. |
center |
Yatayda dönüş noktası öğenin merkezinde. |
Varsayılan değer: center.
Y Ekseni için Değerler
| Değer | Açıklama |
|---|---|
| CSS birimleri | Değer, dönüşüm merkezinin öğenin üst kenarından olan mesafesini belirleyen herhangi bir boyut birimi olabilir. Pozitif bir değer, dönüşüm merkezini aşağı doğru (öğenin içine) kaydırır, negatif bir değer ise yukarı doğru (öğenin dışına) kaydırır. |
top |
Dikeyde dönüş noktası öğenin üst kenarında. |
bottom |
Dikeyde dönüş noktası öğenin alt kenarında. |
center |
Dikeyde dönüş noktası öğenin merkezinde. |
Varsayılan değer: center.
Z Ekseni için Değerler
| Değer | Açıklama |
|---|---|
| CSS birimleri | Değer, dönüşüm merkezinin öğe düzleminden olan mesafesini belirleyen herhangi bir boyut birimi olabilir. Pozitif bir değer onu bize doğru (ekran düzleminden uzaklaştırır), negatif bir değer ise bizden uzağa kaydırır. |
Varsayılan değer: 0px.
Örnek
Şu anda transform-origin özelliğinin değeri belirlenmemiş ve blok kendi merkezine göre dönecektir. Efekti görmek için fareyi bloğun üzerine getirin:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Örnek
Şimdi ise fareyle üzerine gelindiğinde blok sol üst köşesine göre dönecek:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Örnek
Şimdi ise fareyle üzerine gelindiğinde blok sağ alt
köşesine göre dönecek. Bunun için dönüşüm noktasını
sağa doğru 100% ve aşağı doğru 100%
kaydırmak gerekir (px olarak da belirtilebilirdi, ancak
öğenin boyutları değiştiğinde dönüşüm noktası yerinde
kalırdı, bu yüzden % kullanmak daha iyidir):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Örnek
Bloğu sağ üst köşesine göre döndürelim:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Örnek
Bloğu sol kenarın merkezine göre döndürelim.
Bunun için X ekseni için left (dönüş
noktası solda olacak), Y ekseni için ise center
(dönüş noktası dikeyde merkezde olacak) belirtelim:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Örnek
Özellik sadece dönme için değil, diğer dönüşümler
için de kullanılabilir. scale kullanarak
ölçeği, dönüşüm noktasını sol alt köşe olarak
belirterek büyütelim:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left bottom;
transform: scale(1.5);
}
:
Örnek
Şimdi ise dönüşüm noktasını sağ üst köşe olarak belirtelim:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: right top;
transform: scale(1.5);
}
:
Örnek
Dönüşüm noktası öğenin dışında da belirtilebilir. Aşağıdaki örnekte, fare kırmızı bloğun üzerine getirildiğinde siyah blok, dışarıda bulunan bir noktaya göre dönüş yapacak:
<div id="hover"></div>
<div id="elem"></div>
#hover {
border: 1px solid red;
width: 50px;
height: 50px;
}
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
transition: transform 1s;
transform-origin: -100px -100px;
}
#hover:hover + #elem {
transform: rotate(30deg);
}
:
