CSS3 Mentransformasi
Transformasi CSS3 memungkinkan Anda untuk menerjemahkan, memutar, skala, dan condong elemen.
CSS3 mendukung 2D dan 3D transformasi.
CSS3 2D Mentransformasi
Dalam bab ini Anda akan belajar tentang metode transformasi 2D berikut:
- translate ()
- rotate ()
- scale ()
- skewX ()
- skewY ()
- matrix ()
Tip: Anda akan belajar tentang transformasi 3D dalam bab berikutnya.
Translate () Metode
Translate () metode bergerak elemen dari posisi saat ini (sesuai dengan parameter yang diberikan untuk sumbu X dan Y).
Contoh berikut bergerak <div> elemen 50 piksel ke kanan, dan 100 piksel turun dari posisi saat ini:
div {
width: 300px;
height: 300px;
background-color: red;
-webkit-transform: translate(50px, 100px);
-ms-transform: translate(50px, 100px);
transform: translate:(50px, 100px);
}
Rotate () Metode
rotate () metode berputar searah jarum jam suatu unsur atau berlawanan arah jarum jam sesuai dengan tingkat tertentu.
Contoh berikut berputar <div> searah jarum jam elemen dengan 20 derajat:
div {
width: 300px;
height: 300px;
background-color: red;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate:(50px, 100px);
}
Menggunakan nilai negatif akan memutar elemen berlawanan arah jarum jam.
Contoh berikut berputar <div> elemen berlawanan arah jarum jam dengan 20 derajat:
div {
width: 300px;
height: 300px;
background-color: red;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
Scale () Metode
Skala () metode meningkat atau menurun ukuran elemen (sesuai dengan parameter yang diberikan untuk lebar dan tinggi).
Contoh berikut meningkatkan <div> elemen menjadi dua kali lebar aslinya, dan tiga kali dari tinggi aslinya:
div {
width: 300px;
height: 300px;
background-color: red;
-webkit-transform: scale(2, 3);
-ms-transform: scale(2, 3);
transform: scale(2,3);
}
Contoh berikut menurunkan <div> elemen menjadi setengah dari lebar dan tinggi aslinya:
div {
width: 300px;
height: 300px;
background-color: red;
-webkit-transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
}
SkewX () Metode
The skewX () metode skews elemen sepanjang sumbu X dengan sudut tertentu.
Contoh berikut memelintir <div> elemen 20 derajat sepanjang sumbu X:
div {
width: 300px;
height: 300px;
background-color: red;
-webkit-transform: skewX(20deg);
-ms-transform: skewX(20deg);
transform: skewX(20deg);
}
SkewY () Metode
The skewY () metode skews elemen sepanjang sumbu Y dengan sudut tertentu.
Contoh berikut memelintir <div> elemen 20 derajat sepanjang sumbu Y:
div {
width: 300px;
height: 300px;
background-color: red;
-webkit-transform: skewY(20deg);
-ms-transform: skewY(20deg);
transform: skewY(20deg);
}
Skew () Metode
Condong () metode skews elemen sepanjang X dan Y-axis dengan sudut tertentu.
Contoh berikut memelintir <div> elemen 20 derajat sepanjang sumbu X, dan 10 derajat sepanjang sumbu Y:]
div {
width: 300px;
height: 300px;
background-color: red;
-webkit-transform: skew(20deg, 10deg);
-ms-transform: skew(20deg, 10deg);
transform: skew(20deg, 10deg);
}
Jika parameter kedua tidak ditentukan, memiliki nilai nol. Jadi, contoh berikut memelintir <div> elemen 20 derajat sepanjang sumbu X:
div {
width: 300px;
height: 300px;
background-color: red;
-webkit-transform: skew(20deg);
-ms-transform: skew(20deg);
transform: skew(20deg);
}
Matrix () Metode
Matrix () metode menggabungkan semua 2D transformasi metode menjadi satu.
Matriks () metode mengambil enam parameter, mengandung fungsi matematika, yang memungkinkan Anda untuk memutar, skala, bergerak (menerjemahkan), dan skew unsur:
div {
width: 300px;
height: 300px;
background-color: red;
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
0 komentar:
Posting Komentar