CSS3 - Transformasi 2d
Transformasi 2D digunakan untuk mengubah kembali struktur elemen sebagai terjemahan, rotasi, skala, dan kemiringan.
Tabel berikut berisi nilai-nilai umum yang digunakan dalam transformasi 2D -
| Sr.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 bersama dengan sumbu x dan sumbu y |
| 3 | translateX(n) Digunakan untuk mengubah elemen bersama dengan sumbu x |
| 4 | translateY(n) Digunakan untuk mengubah elemen bersama dengan 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(angle) Digunakan untuk memutar elemen berdasarkan suatu sudut |
| 9 | skewX(angle) Digunakan untuk mendefinisikan transformasi kemiringan bersama dengan sumbu x |
| 10 | skewY(angle) Digunakan untuk mendefinisikan transformasi kemiringan bersama dengan sumbu y |
Contoh berikut ini menunjukkan contoh semua properti di atas.
Putar 20 derajat
Rotasi kotak dengan sudut 20 derajat seperti yang ditunjukkan di bawah ini -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Putar -20 derajat
Rotasi kotak dengan sudut -20 derajat seperti yang ditunjukkan di bawah ini -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Sumbu X miring
Rotasi kotak dengan sumbu x miring seperti yang ditunjukkan di bawah ini -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Sumbu Y miring
Rotasi kotak dengan sumbu y miring seperti yang ditunjukkan di bawah ini -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Transformasi matriks
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 {
/* IE 9 */
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Safari */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Standard syntax */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv1">
Tutorials point.com
</div>
</body>
</html>Ini akan menghasilkan 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 {
/* IE 9 */
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Safari */
-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Standard syntax */
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv2">
Tutorials point.com
</div>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -