Atribut Style transform

Definisi dan penggunaan

transform Atribut ini menerapkan transformasi 2D atau 3D pada elemen. Atribut ini memungkinkan Anda memutar, menggandakan, memindahkan, mengeisian, dan lainnya terhadap elemen.

Lihat pula:

Panduan CSS:Atribut transform

Contoh

Rotasi elemen div:

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

Coba sendiri

Sintaks

Kembalikan atribut transform:

object.style.transform

Atur atribut transform:

object.style.transform = "none|transform-functions|initial|inherit"

Nilai atribut

Nilai Deskripsi
none Mendefinisikan bahwa tidak seharusnya ada transformasi.
matrix(n, n, n, n, n, n) Menggunakan matriks dengan enam nilai untuk mendefinisikan transformasi dua dimensi.
matrix3d(n, n, n, n, dll....) Menggunakan matriks 4x4 dengan 16 nilai untuk mendefinisikan transformasi 3D.
translate(x, y) Mendefinisikan translasi 2D.
translate3d(x, y, z) Mendefinisikan translasi 3D.
translateX(x) Mendefinisikan translasi, hanya menggunakan nilai sumbu X.
translateY(y) Mendefinisikan translasi, hanya menggunakan nilai sumbu Y.
translateZ(z) Mendefinisikan translasi 3D, hanya menggunakan nilai sumbu Z.
scale(x, y) Mendefinisikan transformasi proporsional 2D
scale3d(x, y, z) Mendefinisikan transformasi proporsional 3D.
scaleX(x) Mendefinisikan transformasi proporsional dengan memberikan nilai X.
scaleY(y) Mendefinisikan transformasi proporsional dengan memberikan nilai Y.
scaleZ(z) Mendefinisikan transformasi proporsional 3D dengan memberikan nilai Z.
rotate(angle) Mendefinisikan putar 2D, mengatur sudut dalam parameter.
rotate3d(x, y, z, angle) Mendefinisikan putar 3D.
rotateX(angle) Mendefinisikan putar 3D sepanjang sumbu X.
rotateY(angle) Mendefinisikan putar 3D sepanjang sumbu Y.
rotateZ(angle) Mendefinisikan putar 3D sepanjang sumbu Z.
skew(x-angle, y-angle) Mendefinisikan transformasi 2D miring sepanjang sumbu X dan Y.
skewX(angle) Mendefinisikan transformasi 2D miring sepanjang sumbu X.
skewY(angle) Mendefinisikan transformasi 2D miring sepanjang sumbu Y.
perspective(n) Mendefinisikan perspektif transformasi 3D elemen.
initial Atur atribut ini ke nilai defaultnya. Lihat initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai default: tidak ada
Nilai kembalian: string, yang menyatakan Atribut transform.
Versi CSS: CSS3

Dukungan browser

Angka di tabel menunjukkan versi browser yang pertama yang sepenuhnya mendukung atribut ini.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0