CSS memungkinkan efek putaran 3D di sekitar sumbu X, Y, dan Z menggunakan transform: rotateY().
CSS 3D Transforms
Contoh Kode CSS 3D Transforms:
<!DOCTYPE html>
<html>
<head>
<style>
.wadah-3d {
perspective: 800px;
text-align: center;
padding: 30px;
}
.kotak-3d {
width: 180px;
height: 100px;
background: #04AA6D;
color: white;
line-height: 100px;
margin: auto;
transform: rotateX(25deg) rotateY(30deg);
border-radius: 8px;
font-family: sans-serif;
font-weight: bold;
}
</style>
</head>
<body>
<div class="wadah-3d">
<div class="kotak-3d">Efek 3D Transform</div>
</div>
</body>
</html>
Uji dan amati bagaimana deklarasi CSS CSS 3D Transforms mengubah tampilan elemen di atas.