CSS transform-origin Özelliği

CSS transform-origin

Css transform-origin özeliği ile dönüştürülecek html elemanın orijin noktaları düzenlenebilir.

Örnek:

Bu örnete kutu 60 derece döndürülmüştür.

#kutu1 { position: relative; height: 180px; width: 180px; } #kutu2 { position: absolute; -ms-transform: rotate(60deg); /* IE 9 */ -ms-transform-origin: 30% 50%; /* IE 9 */ -webkit-transform: rotate(60deg); /* Chrome, Safari, Opera */ -webkit-transform-origin: 30% 50%; /* Chrome, Safari, Opera */ transform: rotate(45deg); transform-origin: 30% 50%; }

CSS transform-origin nedir nasıl kullanılır

2D dönüşümler bir elemanın x- ve y-ekseni değiştirebilir. 3D dönüşümler de bir elemanın z - eksenini değiştirebilirsiniz.

CSS transform-origin	CSS transform-origin özellikleri
Varsayılan Değer:	50% 50% 0
Kalıtsallık:	yok
Animasyon Özelliği:	var
Versiyon:	CSS3
JavaScript transform-origin:	object.style.transformOrigin="0 0"

CSS transform-origin Tarayıcı Desteği

CSS Kodu:
transform-origin	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	9.0 3.2 -webkit-	23.0 15.0 -webkit- 10.5 -o-
transform-origin	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-

CSS transform-origin Değerleri

transform-origin:x-axis y-axis z-axis|initial|inherit;