Cara menggunakan transform CSS 2D

Kegunaan transform CSS 2D

Pada CSS3 terdapat fitur baru yaitu transformasi 2D, dengan ini Anda bisa memanipulasi transformasi dasar seperti memindahkan, memutar, skala, memiringkan elemen dll. Untuk menggunakan transformasi cukup menggunakan properti transform.

Fungsi translate()

contoh ilustrasi translate

Dengan fungsi translate() Anda bisa memindahkan elemen dari posisi saat ini ke posisi baru di sepanjang sumbu X dan sumbu Y. translate(X, Y). X berarti mengatur posisi untuk horizontal dan Y mengatur posisi untuk vertikal.

#translate {
    transform: translate(100px, 200px);
}
Informasi: Anda bisa memberikan nilai negatif.

Fungsi translateX()

Dengan fungsi translateX() Anda bisa memindahkan elemen dari posisi saat ini ke posisi baru di sepanjang sumbu X atau yang berarti hanya untuk sumbu horizontal saja.

#translate {
    transform: translateX(200px);
}

Fungsi translateY()

Dengan fungsi translateY() Anda bisa memindahkan elemen dari posisi saat ini ke posisi baru di sepanjang sumbu Y atau yang berarti hanya untuk sumbu vertikal saja.

#translate {
    transform: translateY(200px);
}

Fungsi rotate()

contoh ilustrasi rotate

Dengan fungsi rotate() Anda bisa memutarkan elemen searah jarum jam. Bahkan menggunakan nilai negatif Anda bisa memutarkan elemen berlawanan searah jarum jam. Ukuran putaran menggunakan deg atau degree yang berarti derajat.

#rotate {
    transform: rotate(20deg);
}
Informasi: Anda bisa memberikan nilai negatif.

Fungsi scale()

contoh ilustrasi scale

Dengan fungsi scale() Anda bisa menambahkan ukuran atau mengurangi ukuran pada elemen. scale(X, Y), X berarti mengatur ukuran untuk horizontal dan Y mengatur ukuran untuk vertikal. Jika Y tidak ditentukan, diasumsikan sama dengan X. Secara default nilai scale(1, 1).

#scale1 {
    transform: scale(0.5, 0.5);
}
#scale2 {
    transform: scale(2, 2);
}

Fungsi scaleX()

Dengan fungsi scaleX() Anda bisa menambahkan ukuran atau mengurangi ukuran hanya untuk horizontal saja. ScaleX() secara default mempunyai nilai scaleX(1).

#scale1 {
    transform: scaleX(0.5);
}
#scale2 {
    transform: scaleX(2);
}

Fungsi scaleY()

Dengan fungsi scaleY() Anda bisa menambahkan ukuran atau mengurangi ukuran hanya untuk vertikal saja. ScaleY() secara default mempunyai nilai scaleY(1).

#scale1 {
    transform: scaleY(0.5);
}
#scale2 {
    transform: scaleY(3);
}

Fungsi skew()

Dengan fungsi skew() Anda bisa mengubah kemiringan pada elemen. skew(X, Y), X berarti mengubah kemiringan untuk horizontal dan Y mengubah kemiringan untuk vertikal. Jika Y tidak ditentukan, diasumsikan sama dengan X.

#skew {
    transform: skew(20deg,10deg);
}

Fungsi skewX()

Dengan fungsi skewX() Anda bisa mengubah kemiringan elemen hanya untuk horizontal saja.

#skew {
    transform: skewX(30deg);
}

Fungsi skewY()

Dengan fungsi skewY() Anda bisa mengubah kemiringan elemen hanya untuk vertikal saja.

#skew {
    transform: skewY(20deg);
}

Fungsi matrix()

Dengan fungsi matrix() Anda bisa menggabungkan semua 2D dari berbagai fungsi menjadi satu metode. Matrix() sendiri mengambil enam parameter, dan mengandung fungsi matematika yang memungkinkan Anda untuk rotate, scale, translate, dan skew. 

Berikut urutan parameter:

matriks( scaleX(), skewY(), skewX(), ScaleY(), translateX(), translateY() )
#matrix1 {
    transform: matrix(1, -0.3, 0, 1, 0, 0);
}
#matrix2 {
    transform: matrix(1, 0, 0.5, 1, 150, 0); 
}

Namun, saat melakukan lebih dari satu transformasi sekaligus, lebih mudah menggunakan fungsi transformasi individual dan mendaftarnya secara berurutan, seperti ini:

#matrix {
    transform: translate(200px, 50px) rotate(10deg) scale(1.2) skew(0, 10deg);
}

Daftar fungsi transform

FungsiKegunaanya
translate(x,y)Menggerakkan elemen sepanjang sumbu X dan Y
translateX(n)Menggerakkan elemen di sepanjang sumbu-X
translateY(n)Menggerakkan elemen di sepanjang sumbu-Y
scale(x,y)Mengubah lebar dan tinggi elemen sepanjang sumbu X dan Y
scaleX(n)Mengubah lebar dan tinggi elemen di sepanjang sumbu X
scaleY(n)Mengubah lebar dan tinggi elemen di sepanjang sumbu Y
rotate(angle)Menentukan rotasi elemen
skew(x-angle,y-angle)Mengubah transformasi kemiringan sepanjang sumbu X dan Y
skewX(angle)Mengubah transformasi kemiringan di sepanjang sumbu X
skewY(angle)Mengubah transformasi kemiringan di sepanjang sumbu Y
matrix(n,n,n,n,n,n)Mengubah transformasi menggunakan enam nilai matrix