Style transform özelliği

Tanım ve Kullanım

transform Özellik 2D veya 3D dönüşüm uygulamayı elemente uygular. Bu özellik, elemente döndürme, genişletme, hareket ettirme, eğim verme gibi işlemler yapmanıza olanak tanır.

Ayrıca bakınız:

CSS Referans Kılavuzu:transform özelliği

Örnek

Döndür div elementi:

document.getElementById("myDIV").style.transform = "rotate(7deg)";

Kişisel olarak deneyin

Sözdizimi

transform özelliğini döndürür:

object.style.transform

transform özelliğini ayarlar:

object.style.transform = "none|transform-functions|initial|inherit"

Özellik değeri

Değer Açıklama
none Dönüşüm olmamalıdır.
matrix(n, n, n, n, n, n) Altı değeri içeren matrisle iki boyutlu dönüşümü tanımlar.
matrix3d(n, n, n, n, vb...) 3D dönüşümü 4x4 matrisle 16 değeri kullanarak tanımlar.
translate(x, y) 2D kaydırma tanımlar.
translate3d(x, y, z) 3D kaydırma tanımlar.
translateX(x) Sadece X ekseninin değerini kullanarak kaydırma tanımlar.
translateY(y) Sadece Y ekseninin değerini kullanarak kaydırma tanımlar.
translateZ(z) Sadece Z ekseninin değerini kullanarak 3D kaydırma tanımlar.
scale(x, y) 2D oransal dönüşümü tanımlar
scale3d(x, y, z) 3D oransal dönüşümü tanımlar.
scaleX(x) X eksenine bir değer vererek oransal dönüşümü tanımlar.
scaleY(y) Y eksenine bir değer vererek oransal dönüşümü tanımlar.
scaleZ(z) Z eksenine bir değer vererek 3D oransal dönüşümü tanımlar.
rotate(angle) Dereceleri parametrelerde belirleyerek 2D dönüşümü tanımlar.
rotate3d(x, y, z, angle) 3D dönüşümü tanımlar.
rotateX(angle) X eksenine göre 3D dönüşümü tanımlar.
rotateY(angle) Y eksenine göre 3D dönüşümü tanımlar.
rotateZ(angle) Z eksenine göre 3D dönüşümü tanımlar.
skew(x-angle, y-angle) X ve Y eksenlerine göre 2D yatay dönüşümü tanımlar.
skewX(angle) X eksenine göre 2D yatay dönüşümü tanımlar.
skewY(angle) Y eksenine göre 2D yatay dönüşümü tanımlar.
perspective(n) 3D dönüşüm元素的 perspektifini tanımlar.
initial Bu özelliği öntanımlı değerine ayarlar. Bakınız initial.
inherit Bu özelliği ebeveyn elementinden devralır. Bakınız inherit.

Teknik ayrıntılar

Öntanımlı değer: Yok
Dönüşüm değeri: dizgesi,元素的 transform özelliği.
CSS sürümü: CSS3

Tarayıcı desteği

Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0