Belajar CSS Transformasi 2D

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