Belajar CSS3 2d transform (translate, rotate, scale, skew, matrix)

belajar css

CSS3 2d transform

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 property 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.

Contoh:

Editor Online
  1. #translate {
  2. transform: translate(100px, 200px);
  3. }

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.

Contoh:

Editor Online
  1. #translate {
  2. transform: translateX(200px);
  3. }

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.

Contoh:

Editor Online
  1. #translate {
  2. transform: translateY(200px);
  3. }

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.

Contoh:

Editor Online
  1. #rotate {
  2. transform: rotate(20deg);
  3. }

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).

Contoh:

Editor Online
  1. #scale1 {
  2. transform: scale(0.5, 0.5);
  3. }
  4. #scale2 {
  5. transform: scale(2, 2);
  6. }

Fungsi scaleX()

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

Contoh:

Editor Online
  1. #scale1 {
  2. transform: scaleX(0.5);
  3. }
  4. #scale2 {
  5. transform: scaleX(2);
  6. }

Fungsi scaleY()

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

Contoh:

Editor Online
  1. #scale1 {
  2. transform: scaleY(0.5);
  3. }
  4. #scale2 {
  5. transform: scaleY(3);
  6. }

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.

Contoh:

Editor Online
  1. #skew {
  2. transform: skew(20deg,10deg);
  3. }

Fungsi skewX()

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

Contoh:

Editor Online
  1. #skew {
  2. transform: skewX(30deg);
  3. }

Fungsi skewY()

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

Contoh:

Editor Online
  1. #skew {
  2. transform: skewY(20deg);
  3. }

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 () ).

Contoh:

Editor Online
  1. #matrix1 {
  2. transform: matrix(1, -0.3, 0, 1, 0, 0);
  3. }
  4. #matrix2 {
  5. transform: matrix(1, 0, 0.5, 1, 150, 0);
  6. }

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

Contoh:

Editor Online
  1. #matrix {
  2. transform: translate(200px, 50px) rotate(10deg) scale(1.2) skew(0, 10deg);
  3. }

Daftar transform fungsi

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

Leave a Reply

Your email address will not be published. Required fields are marked *