CSS3 mengubah properti
contoh
Rotasi elemen div:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
Coba »
Dukungan Browser
Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.
Segera setelah -webkit- digital, -ms- atau moz lalu mendukung awalan atribut nomor versi browser pertama.
| 属性 | |||||
|---|---|---|---|---|---|
| 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- |
Definisi atribut dan petunjuk
2D Transform properti diterapkan pada elemen atau konversi 3D. Properti ini memungkinkan Anda untuk elemen memutar, zoom, bergerak, tilt, dan sebagainya.
Untuk lebih memahami Transform properti, lihat contoh secara online .
| default: | tak satupun |
|---|---|
| warisan: | tidak |
| versi: | CSS3 |
| sintaks JavaScript: | keberatan .style.transform = "rotate (7deg)" |
tatabahasa
transform:none | mengubah-fungsi;
| nilai | deskripsi |
|---|---|
| tak satupun | Definisi tidak mengkonversi. |
| matriks (n, n, n,n, n, n) | Mendefinisikan konversi 2D, menggunakan matriks enam nilai-nilai. |
| matrix3d (n, n, n,n, n, n, n, n, n, n, n, n, n, n, n, n) | konversi 3D didefinisikan menggunakan 16 nilai 4x4 matrix. |
| menerjemahkan(x, y) | Mendefinisikan konversi 2D. |
| translate3d(x, y, z) | Mendefinisikan konversi 3D. |
| translateX(x) | Definisi konversi, tetapi dengan nilai X-axis. |
| translateY(y) | Definisi konversi, tetapi dengan nilai Y-axis. |
| translateZ(z) | Mendefinisikan konversi 3D, tapi dengan nilai Z sumbu. |
| skala (x [, y]?) | Mendefinisikan transformasi skala 2D. |
| scale3d(x, y, z) | Mendefinisikan transformasi skala 3D. |
| scaleX(x) | Dengan menetapkan nilai sumbu X untuk menentukan transformasi skala. |
| ScaleY(y) | Dengan menetapkan nilai dari Y sumbu untuk mendefinisikan transformasi skala. |
| scaleZ(z) | Untuk menentukan transformasi skala 3D dengan menetapkan nilai Z sumbu. |
| rotate(angle) | Mendefinisikan 2D diputar sudut yang telah ditentukan dalam argumen. |
| rotate3d (x, y, z,angle) | Mendefinisikan rotasi 3D. |
| rotateX(angle) | 3D X didefinisikan sepanjang poros. |
| rotateY(angle) | 3D Y axis didefinisikan sepanjang rotasi. |
| rotateZ(angle) | 3D Z-axis didefinisikan sepanjang rotasi. |
| condong (x-angle, yangle) | Ditetapkan di sepanjang 2D X dan Y-axis condong transformasi. |
| skewX(angle) | 2D X-axis didefinisikan sepanjang kemiringan konversi. |
| skewY(angle) | Ditetapkan di sepanjang sumbu Y transformasi condong 2D. |
| perspektif(n) | elemen konversi 3D untuk menentukan pandangan perspektif. |
contoh yang lebih
Memutar gambar
Contoh ini menunjukkan cara membuat "polaroid" foto dan memutar gambar.