CSS transform-origin Özelliği
CSS transform-origin
Csstransform-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 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;
CSS transform-origin özelliği değerleri
CSS transform-origin değerleri | CSS transform-origin değerleri tanımları |
---|---|
x-axis | X ekseni üzerindeki konumu belirlenir.Alabileceği değerler:
|
y-axis | Y ekseni üzerindeki konumu belirlenir.Alabileceği değerler:
|
z-axis | 3D dönüşümler için konum belirlenebilir. Alacağı değerler: |
initial | Özelliğin varsayılan değeridir. |
inherit | Kalıtsal aldğı değer geçerlidir. |
Yorumlar
Yorum Gönderme