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:
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 transform
Anda 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
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
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
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()
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);
}
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 |