Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 24 : Cara Membuat 2D Transform di CSS. Selanjutnya, kita akan mempelajari cara membuat 3d transform di CSS.
| No. | Nilai & Deskripsi |
| 1 | matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) Digunakan untuk mengubah elemen dengan menggunakan 16 nilai matriks |
| 2 | translate3d(x, y, z) Digunakan untuk mengubah elemen dengan menggunakan sumbu x, sumbu y, dan sumbu z |
| 3 | translateX(x) Digunakan untuk mengubah elemen dengan menggunakan sumbu x |
| 4 | translateY(y) Digunakan untuk mengubah elemen dengan menggunakan sumbu y |
| 5 | translateZ(z) Digunakan untuk mengubah elemen dengan menggunakan sumbu y |
| 6 | scaleX(x) Digunakan untuk mengubah skala elemen dengan menggunakan sumbu x |
| 7 | scaleY(y) Digunakan untuk mengubah skala elemen dengan menggunakan sumbu y |
| 8 | scaleZ(z) Digunakan untuk mengubah elemen dengan menggunakan sumbu z |
| 9 | rotateX(sudut) Digunakan untuk memutar mengubah elemen dengan menggunakan sumbu x |
| 10 | rotateY(sudut) Digunakan untuk memutar mengubah elemen dengan menggunakan sumbu y |
| 11 | rotateZ(sudut) Digunakan untuk memutar mengubah elemen dengan menggunakan sumbu z |
Transformasi 3D sumbu X
Contoh berikut menunjukkan transformasi 3D sumbu x.
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
transform: rotateX(150deg);
}
</style>
</head>
<body>
<div>
Tutorial Mbah WP
</div>
<p>Rotate X-axis</p>
<div id = "myDiv">
Tutorial Mbah WP
</div>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Transformasi 3D sumbu Y
Contoh berikut menunjukkan transformasi 3D sumbu y :
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#yDiv {
transform: rotateY(150deg);
}
</style>
</head>
<body>
<div>
Tutorial Mbah WP
</div>
<p>Rotate Y axis</p>
<div id = "yDiv">
Tutorial Mbah WP
</div>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Transformasi 3D sumbu Z
Contoh berikut menunjukkan transformasi 3D sumbu Z.
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#zDiv {
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<div>
Tutorial Mbah WP
</div>
<p>rotate Z axis</p>
<div id = "zDiv">
Tutorial Mbah WP
</div>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini membantu Anda untuk mempelajari cara membuat 3D Transform di CSS.
0 Komentar