Contoh
Memutar <div> elemen:
div
{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
Cobalah sendiri " Definisi dan Penggunaan
Transform properti menerapkan transformasi 2D atau 3D ke elemen. Properti ini memungkinkan Anda untuk memutar, skala, bergerak, condong, dll, elemen.
Untuk lebih memahami transformasi properti, melihat demo .
| nilai default: | none |
|---|---|
| mewarisi: | no |
| animatable: | yes. Read about animatable Try it |
| Versi: | CSS3 |
| sintaks JavaScript: | object .style.transform="rotate(7deg)" Try it |
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit-, moz, atau -o- menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| 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 | 16.0 10,0 moz | 9.0 4.0 -webkit- |
Sintaksis
transform: none|transform-functions|initial|inherit;Nilai properti
| Nilai | Deskripsi | Mainkan |
|---|---|---|
| none | Mendefinisikan bahwa seharusnya tidak ada transformasi | Mainkan " |
| matrix( n,n,n,n,n,n ) | Mendefinisikan transformasi 2D, menggunakan matriks enam nilai-nilai | Mainkan " |
| 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 | Mainkan " |
| translate3d( x,y,z ) | Mendefinisikan terjemahan 3D | |
| translateX( x ) | Mendefinisikan terjemahan, hanya menggunakan nilai untuk X-axis | Mainkan " |
| translateY( y ) | Mendefinisikan terjemahan, hanya menggunakan nilai sumbu Y | Mainkan " |
| translateZ( z ) | Mendefinisikan terjemahan 3D, hanya menggunakan nilai untuk Z-sumbu | |
| scale( x,y ) | Mendefinisikan transformasi skala 2D | Mainkan " |
| scale3d( x,y,z ) | Mendefinisikan transformasi skala 3D | |
| scaleX( x ) | Mendefinisikan transformasi skala dengan memberikan nilai untuk X-axis | Mainkan " |
| scaleY( y ) | Mendefinisikan transformasi skala dengan memberikan nilai untuk Y-axis | Mainkan " |
| scaleZ( z ) | Mendefinisikan transformasi skala 3D dengan memberikan nilai untuk Z-sumbu | |
| rotate( angle ) | Mendefinisikan rotasi 2D, sudut yang ditentukan dalam parameter | Mainkan " |
| rotate3d( x,y,z,angle ) | Mendefinisikan rotasi 3D | |
| rotateX( angle ) | Mendefinisikan rotasi 3D sepanjang sumbu X | Mainkan " |
| rotateY( angle ) | Mendefinisikan rotasi 3D sepanjang sumbu Y | Mainkan " |
| rotateZ( angle ) | Mendefinisikan rotasi 3D sepanjang sumbu Z | Mainkan " |
| skew( x-angle,y-angle ) | Mendefinisikan 2D transformasi condong sepanjang X dan sumbu Y | Mainkan " |
| skewX( angle ) | Mendefinisikan 2D transformasi condong sepanjang sumbu X | Mainkan " |
| skewY( angle ) | Mendefinisikan 2D transformasi condong sepanjang sumbu Y | Mainkan " |
| perspective( n ) | Mendefinisikan 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 |
Contoh lebih
Gambar dilemparkan di atas meja
Contoh ini menunjukkan cara membuat "polaroid" gambar dan memutar gambar.
Pages terkait
CSS tutorial: CSS 2D Mentransformasi
CSS tutorial: CSS 3D Transforms
Referensi HTML DOM: transform property