Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS Latar Belakang CSS Batas CSS Margin CSS Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS Teks CSS Font CSS Ikon CSS Tautan CSS Daftar CSS Tabel CSS Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS Bayangan CSS Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

Transformasi 2D CSS


Transformasi 2D CSS

Transformasi CSS memungkinkan Anda untuk memindahkan, memutar, menskala, dan memiringkan elemen.

Arahkan mouse ke elemen di bawah ini untuk melihat transformasi 2D:

Putaran 2D

Dalam bab ini Anda akan belajar tentang properti CSS berikut:

  • transform

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.

Property
transform 36.0
10.0
16.0
9.0
23.0

Metode Transformasi CSS 2D

Dengan properti CSS transformAnda dapat menggunakan metode transformasi 2D berikut:

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

Tip: Anda akan mempelajari tentang transformasi 3D di bab berikutnya.


Terjemahan() Metode

Menerjemahkan

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

Contoh berikut memindahkan elemen <div> 50 piksel ke kanan, dan 100 piksel ke bawah dari posisinya saat ini:

Contoh

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

Rotate() Metode

Memutar

Metode rotate()ini memutar elemen searah jarum jam atau berlawanan arah jarum jam sesuai dengan derajat tertentu.

Contoh berikut memutar elemen <div> searah jarum jam dengan 20 derajat:

Contoh

div {
  transform: rotate(20deg);
}

Menggunakan nilai negatif akan memutar elemen berlawanan arah jarum jam.

Contoh berikut memutar elemen <div> berlawanan arah jarum jam dengan 20 derajat:

Contoh

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


Skala() Metode

Skala

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

Contoh berikut meningkatkan elemen <div> menjadi dua kali lebar aslinya, dan tiga kali tinggi aslinya: 

Contoh

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

Contoh berikut mengurangi elemen <div> menjadi setengah dari lebar dan tinggi aslinya: 

Contoh

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

Metode scaleX()

Metode scaleX()menambah atau mengurangi lebar elemen.

Contoh berikut meningkatkan elemen <div> menjadi dua kali lebar aslinya: 

Contoh

div {
  transform: scaleX(2);
}

Contoh berikut mengurangi elemen <div> menjadi setengah dari lebar aslinya: 

Contoh

div {
  transform: scaleX(0.5);
}

Metode scaleY()

Metode scaleY()menambah atau mengurangi ketinggian elemen.

Contoh berikut meningkatkan elemen <div> menjadi tiga kali tinggi aslinya: 

Contoh

div {
  transform: scaleY(3);
}

Contoh berikut mengurangi elemen <div> menjadi setengah dari tinggi aslinya: 

Contoh

div {
  transform: scaleY(0.5);
}

Metode skewX()

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

Contoh berikut memiringkan elemen <div> 20 derajat di sepanjang sumbu X:

Contoh

div {
  transform: skewX(20deg);
}

Metode skewY()

Metode skewY()ini mencondongkan elemen di sepanjang sumbu Y dengan sudut yang diberikan.

Contoh berikut memiringkan elemen <div> 20 derajat di sepanjang sumbu Y:

Contoh

div {
  transform: skewY(20deg);
}

Metode condong ()

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

Contoh berikut memiringkan elemen <div> 20 derajat di sepanjang sumbu X, dan 10 derajat di sepanjang sumbu Y:

Contoh

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

Jika parameter kedua tidak ditentukan, ia memiliki nilai nol. Jadi, contoh berikut memiringkan elemen <div> 20 derajat di sepanjang sumbu X:

Contoh

div {
  transform: skew(20deg);
}

Metode matriks()

Memutar

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

Metode matrix() mengambil enam parameter, yang berisi fungsi matematika, yang memungkinkan Anda untuk memutar, menskala, memindahkan (menerjemahkan), dan memiringkan elemen.

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

Contoh

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

Uji Diri Anda Dengan Latihan

Olahraga:

Dengan transformproperti, pindahkan elemen <div> 100px ke kanan, dan 200px ke bawah.

<style>
div {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid black;
  : ;
}
</style>

<body>
  <div>This is a div</div>
</body>


Properti Transformasi CSS

Tabel berikut mencantumkan semua properti transformasi 2D:

Property Description
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements

Metode Transformasi 2D CSS

Function Description
matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values
translate(x,y) Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n) Defines a 2D translation, moving the element along the X-axis
translateY(n) Defines a 2D translation, moving the element along the Y-axis
scale(x,y) Defines a 2D scale transformation, changing the elements width and height
scaleX(n) Defines a 2D scale transformation, changing the element's width
scaleY(n) Defines a 2D scale transformation, changing the element's height
rotate(angle) Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle) Defines a 2D skew transformation along the X-axis
skewY(angle) Defines a 2D skew transformation along the Y-axis