Section Artikel
Transformasi 2D CSS
Transformasi di CSS memungkinkan kita untuk memindahkan, memutar, menskalakan, dan memiringkan elemen.
Berikut ini adalah properti CSS yang akan nkita pelajari :
transform
Browser Pendukung
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti transform 2D di CSS.
| Property | Google Chrome | Microsoft Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
Metode CSS 2D Transform
Dengan properti transformasi CSS, dibawah ini merupakan metode transform 2D yang digunakan dan akan kita bahasa satu persatu :
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
Metode translate ()
Metode translate() berfungsi untuk memindahkan elemen dari posisinya saat ini (sesuai dengan parameter yang diberikan untuk sumbu X dan sumbu Y).
Contoh berikut memindahkan elemen 50 piksel ke kanan, dan 100 piksel ke bawah dari posisinya saat ini:
Contoh :
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 100px; background-color: blue; border: 1px solid black; -ms-transform: translate(50px,100px); /* IE 9 */ transform: translate(50px,100px); /* Standard syntax */ } </style> </head> <body> <h1>The translate() Method</h1> <p>Metode translate () memindahkan elemen dari posisinya saat ini:</p> <div> Elemen div ini dipindahkan 50 piksel ke kanan dan 100 piksel ke bawah dari posisinya saat ini. </div> </body> </html>
Metode rotate ()
Metode rotate() berfungsi untuk memutar elemen searah jarum jam atau berlawanan arah jarum jam sesuai dengan derajat tertentu.
Contoh berikut memutar elemen searah jarum jam dengan 20 derajat:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
-ms-transform: rotate(20deg); /* IE 9 */
transform: rotate(20deg); /* Standard syntax */
}
</style>
</head>
<body>
<h1>The rotate() Method</h1>
<p>Metode rotate () memutar elemen searah jarum jam atau berlawanan arah jarum jam.</p>
<div>
Elemen div normal.
</div>
<div id="myDiv">
Elemen div ini diputar 20 derajat searah jarum jam.
</div>
</body>
</html>
Menggunakan nilai negatif akan memutar elemen berlawanan arah jarum jam.
Contoh berikut memutar elemen berlawanan arah jarum jam dengan 20 derajat:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
-ms-transform: rotate(-20deg); /* IE 9 */
transform: rotate(-20deg); /* Standard syntax */
}
</style>
</head>
<body>
<h1>The rotate() Method</h1>
<p>Metode rotate () memutar elemen searah jarum jam atau berlawanan arah jarum jam.</p>
<div>
Elemen div normal.
</div>
<div id="myDiv">
Elemen div ini diputar berlawanan arah jarum jam dengan 20 derajat.
</div>
</body>
</html>
Metode scale ()
Metode scale() berfungsi untuk menambah atau mengurangi ukuran elemen (sesuai dengan parameter yang diberikan untuk lebar dan tinggi).
Contoh berikut meningkatkan elemen menjadi dua kali lebar aslinya dan tiga kali tinggi aslinya:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: red;
border: 1px solid black;
-ms-transform: scale(2,3); /* IE 9 */
transform: scale(2,3); /* Standard syntax */
}
</style>
</head>
<body>
<h1>The scale() Method</h1>
<p>Metode scale () menambah atau mengurangi ukuran elemen.</p>
<div>
Elemen div ini dua kali lebih lebar dari aslinya dan tiga kali lebih tinggi dari aslinya.
</div>
</body>
</html>
Contoh berikut mengurangi elemen <div> menjadi setengah dari lebar dan tinggi aslinya:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: red;
border: 1px solid black;
-ms-transform: scale(0.5,0.5); /* IE 9 */
transform: scale(0.5,0.5); /* Standard syntax */
}
</style>
</head>
<body>
<h1>The scale() Method</h1>
<p>Metode scale () menambah atau mengurangi ukuran elemen.</p>
<div>
Elemen div ini dikurangi menjadi setengah dari lebar dan tinggi aslinya.
</div>
</body>
</html>
Metode scaleX ()
Metode scaleX() berfungsi untuk menambah atau mengurangi lebar elemen.
Contoh berikut meningkatkan elemen menjadi dua kali lebar aslinya:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: green;
border: 1px solid black;
-ms-transform: scaleX(2); /* IE 9 */
transform: scaleX(2); /* Standard syntax */
}
</style>
</head>
<body>
<h1>The scaleX() Method</h1>
<p>Metode scaleX () menambah atau mengurangi lebar elemen.</p>
<div>
Elemen div ini dua kali dari lebar aslinya.
</div>
</body>
</html>
Contoh berikut mengurangi elemen <div> menjadi setengah dari lebar aslinya:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: green;
border: 1px solid black;
-ms-transform: scaleX(0.5); /* IE 9 */
transform: scaleX(0.5); /* Standard syntax */
}
</style>
</head>
<body>
<h1>The scaleX() Method</h1>
<p>Metode scaleX () menambah atau mengurangi lebar elemen.</p>
<div>
Elemen div ini setengah dari lebar aslinya.
</div>
</body>
</html>
Metode scaleY ()
Metode scaleY() berfungsi untuk menambah atau mengurangi ketinggian elemen.
Contoh berikut meningkatkan elemen menjadi tiga kali tinggi aslinya:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
-ms-transform: scaleY(3); /* IE 9 */
transform: scaleY(3); /* Standard syntax */
}
</style>
</head>
<body>
<h1>The scaleY() Method</h1>
<p>Metode scaleY () menambah atau mengurangi tinggi elemen.</p>
<div>
Elemen div ini tiga kali tinggi aslinya.
</div>
</body>
</html>
Contoh berikut menurunkan elemen <div> menjadi setengah dari tinggi aslinya:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color:green;
border: 1px solid black;
-ms-transform: scaleY(0.5); /* IE 9 */
transform: scaleY(0.5); /* Standard syntax */
}
</style>
</head>
<body>
<h1>The scaleY() Method</h1>
<p>Metode scaleY () menambah atau mengurangi tinggi elemen.</p>
<div>
Elemen div ini setengah dari tinggi aslinya.
</div>
</body>
</html>
Metode skewX ()
Metode skewX() berfungsi untuk memiringkan elemen di sepanjang sumbu X dengan sudut yang diberikan.
Contoh berikut memiringkan elemen 20 derajat di sepanjang sumbu X:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: blue;
border: 1px solid black;
}
div#myDiv {
-ms-transform: skewX(20deg); /* IE 9 */
transform: skewX(20deg); /* Standard syntax */
}
</style>
</head>
<body>
<h1>The skewX() Method</h1>
<p>Metode skewX () memiringkan elemen di sepanjang sumbu X dengan sudut yang diberikan.</p>
<div>
Elemen div normal.
</div>
<div id="myDiv">
Elemen div ini miring 20 derajat di sepanjang sumbu X..
</div>
</body>
</html>
Metode skewY ()
Metode skewY() berfungsi untuk memiringkan elemen sepanjang sumbu Y dengan sudut tertentu.
Contoh berikut memiringkan elemen 20 derajat di sepanjang sumbu Y:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: purple;
border: 1px solid black;
}
div#myDiv {
-ms-transform: skewY(20deg); /* IE 9 */
transform: skewY(20deg); /* Standard syntax */
}
</style>
</head>
<body>
<h1>The skewY() Method</h1>
<p>Metode skewY () memiringkan elemen sepanjang sumbu Y dengan sudut tertentu.</p>
<div>
Elemen div normal
</div>
<div id="myDiv">
Elemen div ini miring 20 derajat di sepanjang sumbu Y..
</div>
</body>
</html>
Metode skew ()
Metode skew() berfungsi untuk memiringkan elemen di sepanjang sumbu X dan Y dengan sudut yang diberikan.
Contoh berikut memiringkan elemen 20 derajat di sepanjang sumbu X, dan 10 derajat di sepanjang sumbu Y:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: purple;
border: 1px solid black;
}
div#myDiv {
-ms-transform: skew(20deg,10deg); /* IE 9 */
transform: skew(20deg,10deg); /* Standard syntax */
}
</style>
</head>
<body>
<h1>The skew() Method</h1>
<p>Metode skew () memiringkan elemen ke sudut tertentu.</p>
<div>
Elemen div normal.
</div>
<div id="myDiv">
Elemen div ini miring 20 derajat di sepanjang sumbu X, dan 10 derajat di sepanjang sumbu Y..
</div>
</body>
</html>
Jika parameter kedua tidak ditentukan maka nilainya nol. Jadi, contoh berikut memiringkan elemen 20 derajat di sepanjang sumbu X:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
-ms-transform: skew(20deg); /* IE 9 */
transform: skew(20deg); /* Standard syntax */
}
</style>
</head>
<body>
<h1>The skew() Method</h1>
<p>Metode skew () memiringkan elemen ke sudut tertentu.</p>
<div>
Elemen div normal.
</div>
<div id="myDiv">
Elemen div ini miring 20 derajat di sepanjang sumbu X..
</div>
</body>
</html>
Metode matriks ()
Metode matrix() verfungsi untuk menggabungkan semua metode transformasi 2D menjadi satu.
Metode matrix() mengambil enam parameter, berisi fungsi matematika yang memungkinkan kita untuk memutar, menskalakan, memindahkan (menerjemahkan), dan memiringkan elemen.
Parameternya adalah sebagai berikut: matrix (scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv1 {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */
background-color: blue;
}
div#myDiv2 {
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */
transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */
background-color: red;
}
</style>
</head>
<body>
<h1>The matrix() Method</h1>
<p>Metode matrix () menggabungkan semua metode transformasi 2D menjadi satu.</p>
<div>
Elemen div normal.
</div>
<div id="myDiv1">
Menggunakan metode matrix().
</div>
<div id="myDiv2">
Metode matrix() yang lain.
</div>
</body>
</html>
Properti Transformasi CSS
Tabel berikut mencantumkan semua properti transformasi 2D:
| Property | Deskripsi |
|---|---|
| transform | Menerapkan transformasi 2D atau 3D ke elemen |
| transform-origin | Memungkinkan kita untuk mengubah posisi pada elemen yang diubah |
Metode Transformasi CSS 2D
| Function | Deskripsi |
|---|---|
| matrix(n,n,n,n,n,n) | Mendefinisikan transformasi 2D, menggunakan matriks enam nilai |
| translate(x,y) | Mendefinisikan terjemahan 2D, memindahkan elemen sepanjang sumbu X dan Y. |
| translateX(n) | Mendefinisikan terjemahan 2D, memindahkan elemen sepanjang sumbu X. |
| translateY(n) | Mendefinisikan terjemahan 2D, memindahkan elemen sepanjang sumbu Y. |
| scale(x,y) | Mendefinisikan transformasi skala 2D, mengubah lebar dan tinggi elemen |
| scaleX(n) | Mendefinisikan transformasi skala 2D, mengubah lebar elemen |
| scaleY(n) | Mendefinisikan transformasi skala 2D, mengubah tinggi elemen |
| rotate(angle) | Mendefinisikan rotasi 2D, sudut ditentukan dalam parameter |
| skew(x-angle,y-angle) | Mendefinisikan transformasi kemiringan 2D sepanjang sumbu X dan Y. |
| skewX(angle) | Mendefinisikan transformasi kemiringan 2D sepanjang sumbu X. |
| skewY(angle) | Mendefinisikan transformasi kemiringan 2D sepanjang sumbu Y. |
