CSS transform Özelliği

CSS transform

Css transform Dönüşümü özelliği bir elemanın bir 2D veya 3D biçimlendirme işlemlerini düzenler.

Örnek:

Bu örnekte div elemanı 15 derece döndürülmüştür.

div { width: 150px; height: 100px; background-color: pink; transform: rotate(15deg); -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); margin: 50px; }

CSS transform nedir nasıl kullanılır

Css transform özelliği ile html elemanlarını döndürülebilir 2 ve 3 boyutlu nesnelere haline çevirilebilir.

CSS transform CSS transform özellikleri  
Varsayılan Değer: none  
Kalıtsallık: yok  
Animasyon Özelliği: var
Versiyon: CSS3  
JavaScript transform: object.style.transform="rotate(45deg)"

CSS transform Tarayıcı Desteği

CSS Kodu:
transform (2D) 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 (3D) 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
9.0
4.0 -webkit-
23.0
15.0 -webkit-

CSS transform Değerleri

transform: none|transform-functions|initial|inherit;

CSS transform özelliği değerleri

CSS transform değerleri CSS transform değerleri tanımları CSS örnek uygulamalar
none Hiçbir dönüşüm olmaması gerektiğini tanımlar
matrix(n,n,n,n,n,n) Altı değerlerinin bir matris kullanılarak , 2B dönüşüm tanımlar
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 16 değerleri bir 4x4 matris kullanılarak , 3D dönüşümü tanımlar  
translate(x,y) 2Boyut tanımlar
translate3d(x,y,z) 3Boyut tanımlar.  
translateX(x) X-ekseni için yalnızca değeri kullanılarak , bir çeviri tanımlar
translateY(y) Y-ekseni için yalnızca değeri kullanılarak , bir çeviri tanımlar
translateZ(z) Z-ekseni için yalnızca değeri kullanılarak , bir çeviri tanımlar  
scale(x,y) 2Boyut ölçek dönüşümü tanımlar
scale3d(x,y,z) 3Boyut ölçek dönüşümü tanımlar  
scaleX(x) Sadece x eksenindeki boyutu referans alarak ölçekleme yapar.
scaleY(y) Sadece y eksenindeki boyutu referans alarak ölçekleme yapar.
scaleZ(z) Sadece z eksenindeki boyutu referans alarak ölçekleme yapar.  
rotate(angle) Döndürme işlemi için sayısal açı değeri girilir.
rotate3d(x,y,z,angle) 3boyutta döndürme işlemi için tanımlanır.  
rotateX(angle x ekseni etrafında döndürme işlemi tanımlanır.
rotateY(angle) y ekseni etrafında döndürme işlemi tanımlanır.
rotateZ(angle) z ekseni etrafında döndürme işlemi tanımlanır.
skew(x-angle,y-angle) X ve y ekseninde ki döndürme açıları sırasıyla yazılır.
skewX(angle) Sadece x eksenindeki döndürme açısı yazılır.
skewY(angle) Sadece y eksenindeki döndürme açısı yazılır.
perspective(n) 3D dönüştürülmüş eleman için bir perspektif görünüşünü tanımlar
initial Özelliğin varsayılan değeridir.
inherit Kalıtsal olarak aldığı değerdir.  

Yorumlar

  1. çok güzel css öğreten bir site.emeğinize sağlık

    YanıtlaSil

Yorum Gönder

Bu blogdaki popüler yayınlar

HTML Resimler

HTML h1 - h6 Başlık Etiketleri

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

YouTube Reklam Engelleyici

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

HTML5 Canvas Oyun Yapımı Dersleri

Uyurken Bile Para Kazanmak İster misin