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
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