CSS transform Özelliği

CSS transform

Css transformDö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

Popüler yayınlar

HTML Metin Biçimlendirme Etiketleri

HTML em Etiketi

HTML hr Etiketi

CSS justify-content Özelliği

HTML table Etiketi

CSS align-items özelliği

HTML pre Etiketi

CSS flex-basis Özelliği

HTML menu Etiketi

CSS content Özelliği