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

    Popüler yayınlar

    CSS content Özelliği

    CSS justify-content Özelliği

    CSS top Özelliği

    HTML strong Etiketi

    Javascript ile neler yapılabilir

    Kriptopara nasıl alınır ve nereden alınır?

    Javascript Oyun Yapma Dersleri HTML5+CSS3

    Ücretsiz Bitcoin Kazan Pasif Gelir Elde Et İnternetten Para Kazan

    HTML5 Canvas Oyun Yapımı Dersleri

    CSS align-self özelliği