Blog

Belajar CSS Transformasi 2D

 

Belajar CSS Transformasi 2D

CSS     2 months ago


Transformasi CSS memungkinkan Anda translate, memutar, skala, dan membuat elemen HTML miring.

Transformasi adalah efek yang memungkinkan elemen mengubah bentuk, ukuran, dan posisi. CSS mendukung transformasi 2D dan 3D.

Dalam bab ini Anda akan belajar tentang metode transformasi 2D berikut:

  • translate()
  • rotate()
  • scale()
  • skewX()
  • skewY()
  • matrix()

Tips: Anda akan belajar tentang transformasi 3D di artikel  berikutnya.

Method translate()

Metode translate() memindahkan elemen dari posisi saat ini (sesuai dengan parameter yang diberikan untuk sumbu X dan sumbu Y).

Contoh berikut memindahkan elemen

50 piksel ke kanan, dan 100 piksel ke bawah dari posisinya saat ini:

div {
    -ms-transform: translate(50px, 100px); /* IE 9 */
    -webkit-transform: translate(50px, 100px); /* Safari */
    transform: translate(50px, 100px);
}

Method rotate()

Metode rotate() memutar suatu elemen searah jarum jam atau berlawanan arah jarum jam sesuai dengan derajat yang diberikan.

Contoh berikut memutar elemen

searah jarum jam dengan 20 derajat:

div {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg);
}

Menggunakan nilai negatif akan memutar elemen berlawanan arah jarum jam.

Contoh berikut memutar elemen

berlawanan arah jarum jam dengan 20 derajat:

div {
    -ms-transform: rotate(-20deg); /* IE 9 */
    -webkit-transform: rotate(-20deg); /* Safari */
    transform: rotate(-20deg);
}

Method scale()

Skala() metode meningkatkan atau menurunkan ukuran elemen (sesuai dengan parameter yang diberikan untuk lebar dan tinggi).

Contoh berikut meningkatkan elemen

menjadi dua kali dari lebar aslinya, dan tiga kali tinggi aslinya:

div {
    -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);
}

Contoh berikut menurunkan elemen

menjadi setengah dari lebar dan tinggi aslinya:

div {
    -ms-transform: scale(0.5, 0.5); /* IE 9 */
    -webkit-transform: scale(0.5, 0.5); /* Safari */
    transform: scale(0.5, 0.5);
}

Method skewX()

Metode skewX() menyamarkan elemen sepanjang sumbu X dengan sudut yang diberikan.

Contoh berikut ini menyorot elemen

20 derajat sepanjang sumbu X:

div {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}

Method skewY()

Metode skewY() menyamarkan elemen sepanjang sumbu Y dengan sudut yang diberikan.

Contoh berikut ini mengubah elemen

20 derajat sepanjang sumbu Y:

div {
    -ms-transform: skewY(20deg); /* IE 9 */
    -webkit-transform: skewY(20deg); /* Safari */
    transform: skewY(20deg);
}

Method skew()

Metode skew() menggerakkan elemen sepanjang X dan sumbu Y dengan sudut yang diberikan.

Contoh berikut ini mengubah elemen

20 derajat sepanjang sumbu X, dan 10 derajat sepanjang sumbu Y:

div {
    -ms-transform: skew(20deg, 10deg); /* IE 9 */
    -webkit-transform: skew(20deg, 10deg); /* Safari */
    transform: skew(20deg, 10deg);
}

Jika parameter kedua tidak ditentukan, itu memiliki nilai nol. Jadi, contoh berikut ini menyorot

elemen 20 derajat sepanjang sumbu X:

div {
    -ms-transform: skew(20deg); /* IE 9 */
    -webkit-transform: skew(20deg); /* Safari */
    transform: skew(20deg);
}

Method matrix()

Metode matriks() menggabungkan semua metode transformasi 2D menjadi satu.

Metode matriks() mengambil enam parameter, yang berisi fungsi-fungsi matematika, yang memungkinkan Anda untuk memutar, skala, bergerak (menerjemahkan), dan elemen miring.

Parameternya adalah sebagai berikut: matriks (scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

div {
    -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
    -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
    transform: matrix(1, -0.3, 0, 1, 0, 0);
}

2D Transform Methods

Function Deskripsi
matrix(n,n,n,n,n,n) Mendefinisikan transformasi 2D, menggunakan matriks enam nilai
translate(x,y) Mendefinisikan terjemahan 2D, menggerakkan elemen sepanjang X- dan sumbu Y.
translateX(n) Mendefinisikan terjemahan 2D, menggerakkan elemen sepanjang sumbu X.
translateY(n) Mendefinisikan terjemahan 2D, menggerakkan elemen sepanjang sumbu Y.
scale(x,y) Menentukan transformasi skala 2D, mengubah lebar dan tinggi elemen
scaleX(n) Menentukan transformasi skala 2D, mengubah lebar elemen
scaleY(n) Mendefinisikan transformasi skala 2D, mengubah tinggi elemen
rotate(angle) Mendefinisikan rotasi 2D, sudut ditentukan dalam parameter
skew(x-angle,y-angle) Mendefinisikan transformasi skew 2D sepanjang X- dan sumbu Y.
skewX(angle) Mendefinisikan transformasi skew 2D sepanjang sumbu X.
skewY(angle) Mendefinisikan transformasi skew 2D sepanjang sumbu Y.