CSS transform özelliği

Tanım ve kullanım

Transform özelliği elemente 2D veya 3D dönüşüm uygulayabilir. Bu özellik, elemente döndürme, büyütme, hareket ettirme veya eğme yapmamıza olanak tanır.

Transform özelliğini daha iyi anlamak için lütfen buyu gözden geçirinGösteri.

Ayrıca bkz:

CSS3 eğitim:CSS3 2D Dönüşüm

CSS3 eğitim:CSS3 3D Dönüşüm

HTML DOM referans el kitabı:transform özelliği

Örnek

div elementini döndürün:

div
{
transform:rotate(7deg);
}

Kişisel olarak deneyin

Daha fazla örnek sayfa altında.

CSS grameri

transform: none|transform-fonksiyonları;

Özellik değeri

Değer Açıklama Test
yok Dönüşüm yapmayı tanımlayın. Test
matrix(n,n,n,n,n,n) 2D dönüşümü tanımlayın, altı değerli bir matris kullanarak. Test
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 3D dönüşümü tanımlayın, 4x4 matris kullanarak 16 değer.
translate(x,y) 2D dönüşü tanımlar. Test
translate3d(x,y,z) 3D dönüşü tanımlar.
translateX(x) Sadece X ekseninin değerini kullanarak dönüş tanımlar. Test
translateY(y) Sadece Y ekseninin değerini kullanarak dönüş tanımlar. Test
translateZ(z) Sadece Z ekseninin değerini kullanarak 3D dönüş tanımlar.
scale(x,y) 2D ölçekleme dönüşü tanımlar. Test
scale3d(x,y,z) 3D ölçekleme dönüşü tanımlar.
scaleX(x) X ekseninin değerini ayarlayarak ölçekleme dönüşü tanımlar. Test
scaleY(y) Y ekseninin değerini ayarlayarak ölçekleme dönüşü tanımlar. Test
scaleZ(z) Z ekseninin değerini ayarlayarak 3D ölçekleme dönüşü tanımlar.
rotate(angle) 2D dönüşü tanımlar, parametrelerde açı belirtilir. Test
rotate3d(x,y,z,angle) 3D dönüş tanımlar.
rotateX(angle) X eksenine göre 3D dönüş tanımlar. Test
rotateY(angle) Y eksenine göre 3D dönüş tanımlar. Test
rotateZ(angle) Z eksenine göre 3D dönüş tanımlar. Test
skew(x-angle,y-angle) X ve Y eksenlerine göre 2D yatay dönüş tanımlar. Test
skewX(angle) X eksenine göre 2D yatay dönüş tanımlar. Test
skewY(angle) Y eksenine göre 2D yatay dönüş tanımlar. Test
perspective(n) 3D dönüşüm elementleri için perspektif görünümü tanımlar. Test

Teknik Ayrıntılar

Varsayılan Değer: yok
Inheritance: hayır
Sürüm: CSS3
JavaScript Syntaxi: object.style.transform="rotate(7deg)"

Daha fazla örnek

Masanın üzerindeki resim
Bu örnek, 'Polaroid' fotoğrafı nasıl oluşturulduğunu ve fotoğrafın nasıl döndürüleceğini gösterir.

Browser Support

Tablo中的数字注明了完全支持该属性的首个浏览器版本。

webkit-, moz- veya ms- ile başlayan sayılar, önek kullanılan ilk sürümü gösterir.

Özellik Chrome IE / Edge Firefox Safari Opera
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-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-