Transformasi 2D CSS

Transformasi 2D CSS

Transformasi CSS (transforms) memungkinkan Anda memgerakkan, memutar, mengukur, dan menyemprotkan elemen.

Tahan kursor di atas elemen di bawah ini untuk melihat transformasi 2D:

2D rotate

Di bab ini, Anda akan belajar atribut CSS berikut:

  • transform

Dukungan Browser

Angka di tabel menunjukkan versi pertama browser yang mendukung atribut ini penuh.

Atribut Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

Metode transformasi 2D CSS

dengan menggunakan CSS transform Atribut, Anda dapat mengggunakan metode transformasi 2D berikut:

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

Petunjuk:Anda akan belajar transformasi 3D di bab berikutnya.

Metode translate()

Translate

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

Contoh di bawah ini memindahkan elemen <div> ke arah kanan 50 pixel dan ke bawah 100 pixel dari posisinya saat ini:

Contoh

div {
  transform: translate(50px, 100px);
}

Coba sendiri

Metode rotate()

Rotate

rotate() Metode memutar elemen searah jarum jam atau sebalik jarum jam sesuai dengan sudut yang diberikan.

Contoh di bawah ini memutar elemen <div> sebesar 20 derajat sebalik jarum jam:

Contoh

div {
  transform: rotate(20deg);
}

Coba sendiri

gunakan nilai negatif untuk memutar elemen searah jarum jam.

Contoh di bawah ini memutar elemen <div> sebesar 20 derajat searah jarum jam:

Contoh

div {
  transform: rotate(-20deg);
}

Coba sendiri

Metode scale()

Scale

scale() Metode menambahkan atau mengurangi ukuran elemen (sesuai dengan parameter lebar dan tinggi yang diberikan).

Contoh di bawah ini memperbesar elemen <div> menjadi dua kali lebar dan tiga kali tinggi aslinya:

Contoh

div {
  transform: scale(2, 3);
}

Coba sendiri

Contoh di bawah ini mengurangi elemen <div> menjadi setengah lebar dan tinggi aslinya:

Contoh

div {
  transform: scale(0.5, 0.5);
}

Coba sendiri

Metode scaleX()

scaleX() Metode menambahkan atau mengurangi lebar elemen.

Contoh di bawah ini memperbesar elemen <div> menjadi dua kali lebar aslinya:

Contoh

div {
  transform: scaleX(2);
}

Coba sendiri

Contoh di bawah ini mengurangi elemen <div> menjadi setengah lebar aslinya:

Contoh

div {
  transform: scaleX(0.5);
}

Coba sendiri

Metode scaleY()

scaleY() Metode ini menambahkan atau mengurangi tinggi elemen.

Contoh di bawah ini memperbesar elemen <div> menjadi tiga kali tingginya asli:

Contoh

div {
  transform: scaleY(3);
}

Coba sendiri

Contoh di bawah ini mengurangi elemen <div> menjadi setengah tingginya asli:

Contoh

div {
  transform: scaleY(0.5);
}

Coba sendiri

Metode skewX()

skewX() Metode ini membuat elemen miring sepanjang sudut yang diberikan di sumbu X.

Contoh di bawah ini membuat elemen <div> miring sepanjang sumbu X 20 derajat:

Contoh

div {
  transform: skewX(20deg);
}

Coba sendiri

Metode skewY()

skewY() Metode ini membuat elemen miring sepanjang sudut yang diberikan di sumbu Y.

Contoh di bawah ini membuat elemen <div> miring sepanjang sumbu Y 20 derajat:

Contoh

div {
  transform: skewY(20deg);
}

Coba sendiri

Metode skew()

skew() Metode ini membuat elemen miring sepanjang sudut yang diberikan di sumbu X dan Y.

Contoh di bawah ini membuat elemen <div> miring sepanjang sumbu X 20 derajat, serta miring sepanjang sumbu Y 10 derajat:

Contoh

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

Coba sendiri

Jika parameter kedua tidak disebutkan, nilai adalah nol. Oleh karena itu, contoh di bawah ini membuat elemen <div> miring sepanjang sumbu X 20 derajat:

Contoh

div {
  transform: skew(20deg);
}

Coba sendiri

Metode matrix()

Rotate

matrix() Metode ini menggabungkan semua metode transformasi 2D ke satu.

matrix() Metode ini menerima enam parameter, termasuk fungsi matematika, yang memungkinkan Anda memutar, menggandakan, memindahkan (translasi) dan mengecap elemen.

Parameter seperti berikut: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Contoh

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

Coba sendiri

Atribut transformasi CSS

Tabel di bawah ini menampilkan semua atribut transformasi 2D:

Atribut Deskripsi
transform Aplikasikan transformasi 2D atau 3D ke elemen.
transform-origin Memungkinkan Anda mengubah posisi elemen yang diubah.

Metode transformasi 2D CSS

Fungsi Deskripsi
matrix(n,n,n,n,n,n) Definisi transformasi 2D, menggunakan matriks enam nilai.
translate(x,y) Definisi transformasi 2D, pindahkan elemen sepanjang sumbu X dan Y.
translateX(n) Definisi transformasi 2D, pindahkan elemen sepanjang sumbu X.
translateY(n) Definisi transformasi 2D, pindahkan elemen sepanjang sumbu Y.
scale(x,y) Definisi transformasi skala 2D, mengubah lebar dan tinggi elemen.
scaleX(n) Definisi transformasi skala 2D, mengubah lebar elemen.
scaleY(n) Definisi transformasi skala 2D, mengubah tinggi elemen.
rotate(angle) Definisi putar 2D, dalam parameter tentukan sudut.
skew(x-angle,y-angle) Definisi transformasi oblik 2D, sepanjang sumbu X dan Y.
skewX(angle) Definisi transformasi oblik 2D, sepanjang sumbu X.
skewY(angle) Definisi transformasi oblik 2D, sepanjang sumbu Y.