tutorial pengembangan web terbaru
 

Style transform Property

<Style Object

Contoh

Putar elemen div:

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

Definisi dan Penggunaan

Transformasi properti menerapkan transformasi 2D atau 3D untuk elemen. Properti ini memungkinkan Anda untuk memutar, skala, memindahkan, miring, dll, elemen.


Dukungan Browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Transformasi properti didukung di Internet Explorer 10 dan Firefox.

Internet Explorer 9 mendukung alternatif, properti msTransform (2D transforms only) .

Opera, Chrome dan Safari mendukung alternatif, properti WebkitTransform (3D dan 2D mengubah).


Sintaksis

Kembali properti transform:

object .style.transform

Mengatur properti transform:

object .style.transform="none| Nilai properti
Nilai Deskripsi
none Mendefinisikan bahwa seharusnya tidak ada transformasi
matrix( n,n,n,n,n,n ) Mendefinisikan transformasi 2D, menggunakan matriks enam nilai-nilai
matrix3d
( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n )
Mendefinisikan transformasi 3D, menggunakan matriks 4x4 dari 16 nilai-nilai
translate( x,y ) Mendefinisikan terjemahan 2D
translate3d( x,y,z ) Mendefinisikan terjemahan 3D
translateX( x ) Mendefinisikan terjemahan, hanya menggunakan nilai untuk sumbu X
translateY( y ) Mendefinisikan terjemahan, hanya menggunakan nilai sumbu Y
translateZ( z ) Mendefinisikan terjemahan 3D, hanya menggunakan nilai untuk Z-sumbu
scale( x,y ) Mendefinisikan transformasi skala 2D
scale3d( x,y,z ) Mendefinisikan transformasi skala 3D
scaleX( x ) Mendefinisikan transformasi skala dengan memberikan nilai untuk sumbu X
scaleY( y ) Mendefinisikan transformasi skala dengan memberikan nilai sumbu Y
scaleZ( z ) Mendefinisikan transformasi skala 3D dengan memberikan nilai untuk Z-sumbu
rotate( angle ) Mendefinisikan rotasi 2D, sudut yang ditentukan dalam parameter
rotate3d( x,y,z,angle ) Mendefinisikan rotasi 3D
rotateX( angle ) Mendefinisikan rotasi 3D sepanjang sumbu X
rotateY( angle ) Mendefinisikan rotasi 3D di sepanjang sumbu Y
rotateZ( angle ) Mendefinisikan rotasi 3D sepanjang sumbu Z
skew( x-angle,y-angle ) Mendefinisikan 2D transformasi condong sepanjang X dan sumbu Y
skewX( angle ) Mendefinisikan 2D transformasi condong sepanjang sumbu X
skewY( angle ) Mendefinisikan 2D transformasi condong sepanjang sumbu Y
perspective( n ) Mendefinisikan sebuah perspektif untuk elemen 3D ditransformasikan
initial Set properti ini ke nilai default. Baca tentang awal
inherit Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi

Rincian teknis

Nilai default: tak satupun
Kembali Nilai: Sebuah String, yang mewakili mengubah properti dari suatu elemen
CSS Versi CSS3

Pages terkait

Referensi CSS: transform property


<Style Object