Section Artikel
Transformasi 3D CSS
Setelah mempelajari transformasi CSS 2D, kali ini kita akan mempelajari transformasi CSS 3D. Berikut ini properti yang digunakan pada transformasi CSS 3D :
transform
Browser Pendukung
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti transform CSS 3D.
| Property | Google Chrome | Microsoft Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
Metode Transformasi CSS 3D
Dengan properti transformasi CSS, ktia bisa menggunakan metode transformasi 3D berikut:
rotateX()rotateY()rotateZ()
Metode rotateX ()
Metode rotateX() berfungsi untuk memutar elemen di sekitar sumbu X-nya pada derajat tertentu:
Contoh :
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } #myDiv { transform: rotateX(150deg); } </style> </head> <body> <h1>The rotateX() Method</h1> <p>Metode rotateX () memutar elemen di sekitar sumbu X-nya pada derajat tertentu.</p> <div> Eleemn div normal. </div> <div id="myDiv"> Elemen div ini diputar 150 derajat. </div> <p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX() method.</p> </body> </html>
Metode rotateY ()
Metode rotateY() berfungsi untuk memutar elemen di sekitar sumbu Y pada derajat tertentu:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: blue;
border: 1px solid black;
}
#myDiv {
transform: rotateY(150deg);
}
</style>
</head>
<body>
<h1>The rotateY() Method</h1>
<p>Metode rotateY () memutar elemen di sekitar sumbu Y pada derajat tertentu.</p>
<div>
Elemen div normal.
</div>
<div id="myDiv">
Elemen div ini diputar 150 derajat.
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateY() method.</p>
</body>
</html>
Metode rotateZ ()
Metode rotateZ() berfungsi untuk memutar elemen di sekitar sumbu Z pada derajat tertentu:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
#myDiv {
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<h1>The rotateZ() Method</h1>
<p>Metode rotateZ () memutar elemen di sekitar sumbu Z-nya pada derajat tertentu.</p>
<div>
Elemen div normal.
</div>
<div id="myDiv">
Elemen div ini diputar 90 derajat.
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateZ() method.</p>
</body>
</html>
Properti Transformasi CSS
Tabel berikut mencantumkan semua properti transformasi 3D:
| Property | Deskripsi |
|---|---|
| transform | Menerapkan transformasi 2D atau 3D ke elemen |
| transform-origin | Memungkinkan kita untuk mengubah posisi pada elemen yang diubah |
| transform-style | Menentukan elemen bersarang dirender dalam ruang 3D |
| perspective | Menentukan perspektif tentang bagaimana elemen 3D dilihat |
| perspective-origin | Menentukan posisi bawah elemen 3D |
| backface-visibility | Mendefinisikan suatu elemen harus terlihat atau tidak saat tidak menghadap layar |
Metode Transformasi CSS 3D
| Function | Deskripsi |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Mendefinisikan transformasi 3D, menggunakan matriks 4×4 dengan 16 nilai |
| translate3d(x,y,z) | Mendefinisikan terjemahan 3D |
| translateX(x) | Mendefinisikan terjemahan 3D, hanya menggunakan nilai untuk sumbu X. |
| translateY(y) | Mendefinisikan terjemahan 3D, hanya menggunakan nilai untuk sumbu Y. |
| translateZ(z) | Mendefinisikan terjemahan 3D, hanya menggunakan nilai untuk sumbu Z. |
| scale3d(x,y,z) | Mendefinisikan transformasi skala 3D |
| scaleX(x) | Mendefinisikan transformasi skala 3D dengan memberikan nilai untuk sumbu X. |
| scaleY(y) | Mendefinisikan transformasi skala 3D dengan memberikan nilai untuk sumbu Y. |
| scaleZ(z) | Mendefinisikan transformasi skala 3D dengan memberikan nilai untuk sumbu Z. |
| rotate3d(x,y,z,angle) | Mendefinisikan rotasi 3D |
| rotateX(angle) | Mendefinisikan rotasi 3D di sepanjang sumbu X. |
| rotateY(angle) | Mendefinisikan rotasi 3D di sepanjang sumbu Y. |
| rotateZ(angle) | Mendefinisikan rotasi 3D di sepanjang sumbu Z. |
| perspective(n) | Mendefinisikan tampilan perspektif untuk elemen transformasi 3D |
