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 Resimler

    HTML yorum etiketi ile öğe gizleme örneği

    HTML5 Canvas Oyun Yapımı Dersleri

    Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

    YouTube Reklam Engelleyici

    javascript ile aciklama satiri ve haftanın gunünü bulma

    Uyurken Bile Para Kazanmak İster misin

    CSS content Özelliği