Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 23 : Cara Membuat Bayangan di CSS. Selanjutnya, kita akan mempelajari cara membuat 2D Transform di CSS.
Transformasi 2D digunakan untuk mengubah struktur elemen dalam bentuk translate, putar, skala, dan kemiringan. Tabel berikut berisi nilai-nilai umum yang digunakan dalam transformasi 2D :
| No. | Nilai & Deskripsi |
| 1 | matrix(n, n, n, n, n, n) Digunakan untuk mendefinisikan transformasi matriks dengan enam nilai |
| 2 | translate(x, y) Digunakan untuk mengubah elemen terhadapa sumbu x dan sumbu y |
| 3 | translateX(n) Digunakan untuk mengubah elemen terhadap sumbu x |
| 4 | translateY(n) Digunakan untuk mengubah elemen terhadap sumbu y |
| 5 | scale(x, y) Digunakan untuk mengubah lebar dan tinggi elemen |
| 6 | scaleX(n) Digunakan untuk mengubah lebar elemen |
| 7 | scaleY(n) Digunakan untuk mengubah ketinggian elemen |
| 8 | rotate(sudut) Digunakan untuk memutar elemen berdasarkan suatu sudut |
| 9 | skewX(sudut) Digunakan untuk mendefinisikan transformasi kemiringan terhadap sumbu x |
| 10 | skewY(sudut) Digunakan untuk mendefinisikan transformasi kemiringan terhadap sumbu y |
Contoh berikut ini menunjukkan contoh dari semua properti di atas.
Rotate 20 derajat
Rotasi kotak dengan sudut 20 derajat seperti gambar di bawah ini :
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
Tutorial Mbah WP
</div>
<div id = "myDiv">
Tutorial Mbah WP
</div>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Rotate -20 derajat
Rotasi kotak dengan sudut -20 derajat seperti gambar di bawah ini :
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div>
Tutorial Mbah WP
</div>
<div id = "myDiv">
Tutorial Mbah WP
</div>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Miring Terhadap Sumbu X
Rotasi kotak menjadi miring terhadap sumbu x seperti yang ditunjukkan di bawah ini :
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>
Tutorial Mbah WP
</div>
<div id = "skewDiv">
Tutorial Mbah WP
</div>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Miring Terhadap Sumbu Y
Rotasi kotak miring terhadap sumbu y seperti gambar di bawah ini :
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
transform: skewY(20deg);
}
</style>
</head>
<body>
<div>
Tutorial Mbah WP
</div>
<div id = "skewDiv">
Tutorial Mbah WP
</div>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Transformasi Matrix
Rotasi kotak dengan transformasi matriks seperti yang ditunjukkan di bawah ini :
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv1 {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<div>
Tutorial Mbah WP
</div>
<div id = "myDiv1">
Tutorial Mbah WP
</div>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Matriks Berubah Dengan Arah Lain
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv2 {
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
Tutorial Mbah WP
</div>
<div id = "myDiv2">
Tutorial Mbah WP
</div>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini bisa membantu Anda untuk belajar membuat SD Transform di CSS.
0 Komentar