Transform adalah cara mengolah suatu gambar, misal ada rotate, mengatur posisi, mengubah ukuran, dll. Semua proses itu dinamakan transform.
Ada dua jenis transform, salah satunya adalah 2D transform (dua dimensi).
Ada banyak value dari property transform, yaitu:
Ada yang lain sebenarnya, tapi itu yang paling utama.
Translate
Pertama adalah translate(), translate disini bukan terjemahan ya maksudnya. Tapi mengubah posisi suatu element berdasar sumbu x dan atau sumbu y.
Syntaxnya translate(tx, ty), dimana tx adalah posisi sumbu x, dan ty adalah posisi sumbu y.
div {transform:translate (200px, 50px);}
Rotate
Fungsi rotate() digunakan untuk memutar sebuah obyek berdasarkan satu sumbu titik tengah obyek.
Syntaxnya adalah rotate(a) dimana a adalah besar derajat putaran.
div {transform:rotate(30deg)}
Scale
Fungsi scale() digunakan untuk mengubah ukuran element. Dengan syntax scale(a) dimana a adalah besar kelipatan ukurannya. Misal 1.5 artinya ukurannya 1,5 kali lebih besar.
Ada juga scaleX() digunakan untuk menambah ukuran panjang element, sedangkan scaleY() untuk tinggi element.
#div{transform:scale(1.5);}
#div1{transform:scaleY(1.2);}
#div2{transform:scaleX(1);}
Skew
Ini hampir mirip dengan scale(), bedanya skew() bisa diatur sumbu x dan y. Syntax skew(ax, ay), dimana ax adalah sumbu x dan ay adalah sumbu y.
Jika ay tidak ditulis alias cuma skew(ax) maka ay dianggap nol.
Ada juga skewX() untuk mengatur kemiringan berdasar sumbu x (horizontal)
Sedangkan skewY() mengatur kemiringan berdasar sumbu y (vertikal)
#div1 {transform:skew(29deg, 15deg);}
#div2 {transform:skew(20deg);}
Matrix
Dengan menggunakan matrix() kita bisa mengkombinasikan semuanya menjadi satu. Lihat syntaxnya:
transform: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Contoh penggunaan:
div {
transform: matrix(1, -0.2, 0, 1, 0, 0);
}
Fungsi CSS3 2D Transform
Berikut ini adalah daftar fungsi 2d transformation css3:
| Fungsi | Keterangan |
|---|---|
| matrix(n,n,n,n,n,n) | Menentukan matrix 2D transformation dengan ukuran 4×4 |
| rotate(angle) | Menentukan nilai derajat rotasi |
| scale(x,y) | Mengubah ukuran width x dan height y gambar dengan 2D tranformation |
| scaleX(n) | Mengubah ukuran width x gambar dengan 2D tranformation |
| scaleY(n) | Mengubah ukuran height y gambar dengan 2D tranformation |
| skew(x-angle,y-angle) | Mengubah ukuran gambar 2D berdasar sumbu-x dan sumbu-y |
| skewX(angle) | Mengubah ukuran gambar 2D berdasar sumbu-x dan sumbu-y |
| skewY(angle) | Mengubah ukuran gambar 2D berdasar sumbu-y |
| translate(x,y) | Memindahkan element berdasar sumbu-x dan sumbu-y |
| translateX(n) | Memindahkan element berdasar sumbu-x |
| translateY(n) | Memindahkan element berdasar sumbu-y |