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;

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:
  • left
  • center
  • right
  • length
  • %
y-axis Y ekseni üzerindeki konumu belirlenir.Alabileceği değerler:
  • left
  • center
  • right
  • length
  • %
z-axis 3D dönüşümler için konum belirlenebilir. Alacağı değerler:
  • length
  • initial Özelliğin varsayılan değeridir.
    inherit Kalıtsal aldğı değer geçerlidir.

    Yorumlar

    Bu blogdaki popüler yayınlar

    HTML center Etiketi

    HTML del Etiketi

    HTML label Etiketi

    HTML main Etiketi

    HTML details Etiketi

    HTML Element Referansları

    Linklerin Renklerini Değiştirme Örnek

    CSS content Özelliği