Properti transform CSS

Definisi dan penggunaan

Atribut transform menerapkan transformasi 2D atau 3D pada elemen. Atribut ini memungkinkan kita untuk memutar, menggandakan, memindahkan, atau mengecantik elemen.

Untuk memahami atribut transform lebih baik, lihat iniDemo.

Lihat pula:

Panduan pelatihan CSS3:Transformasi 2D CSS3

Panduan pelatihan CSS3:Transformasi 3D CSS3

Panduan referensi HTML DOM:Atribut transform

Contoh

Putar elemen div:

div
{
transform:rotate(7deg);
}

Coba sendiri

Ada banyak contoh di bawah halaman.

Syarat CSS

transform: none|transform-functions;

Nilai atribut

Nilai Deskripsi pengujian
tidak ada Definisi tanpa transformasi. pengujian
matrix(n,n,n,n,n,n) Definisi transformasi 2D, menggunakan matriks dengan enam nilai. pengujian
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Definisi transformasi 3D, menggunakan matriks 4x4 dengan 16 nilai.
translate(x,y) mengatur transformasi 2D. pengujian
translate3d(x,y,z) mengatur transformasi 3D.
translateX(x) mengatur transformasi, hanya menggunakan nilai sumbu X. pengujian
translateY(y) mengatur transformasi, hanya menggunakan nilai sumbu Y. pengujian
translateZ(z) mengatur transformasi 3D, hanya menggunakan nilai sumbu Z.
scale(x,y) mengatur transformasi skala 2D. pengujian
scale3d(x,y,z) mengatur transformasi skala 3D.
scaleX(x) mengatur transformasi skala dengan mengatur nilai sumbu X. pengujian
scaleY(y) mengatur transformasi skala dengan mengatur nilai sumbu Y. pengujian
scaleZ(z) mengatur transformasi skala 3D dengan mengatur nilai sumbu Z.
rotate(sudut) mengatur putar 2D, menentukan sudut di parameter. pengujian
rotate3d(x,y,z,sudut) mengatur putar 3D.
rotateX(sudut) mengatur putar 3D sepanjang sumbu X. pengujian
rotateY(sudut) mengatur putar 3D sepanjang sumbu Y. pengujian
rotateZ(sudut) mengatur putar 3D sepanjang sumbu Z. pengujian
skew(sudut-x,sudut-y) mengatur transformasi penurunan 2D sepanjang sumbu X dan Y. pengujian
skewX(sudut) mengatur transformasi penurunan 2D sepanjang sumbu X. pengujian
skewY(sudut) mengatur transformasi penurunan 2D sepanjang sumbu Y. pengujian
perspective(n) mengatur pandangan perspektif untuk elemen transformasi 3D. pengujian

detil teknis

nilai standar: tidak ada
keberangkatan: tidak
versi: CSS3
gramata JavaScript: object.style.transform="rotate(7deg)"

contoh lebih banyak

gambar yang dijatuhkan ke atas meja
contoh ini menunjukkan bagaimana membuat gambar 'Polaroid' dan memutar gambar.

dukungan browser

angka di tabel menandai versi browser pertama yang mendukung atribut ini.

angka yang diawali dengan -webkit-、-moz- atau -ms- menunjukkan versi awal yang menggunakan prefiks.

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