Core Code
Core Code Modern Dev Handbook

3D Hover Card

3D transforms can create interactive card effects.

Preview

Code

<style>
.container{
perspective:600px;
}

.card{
width:140px;
height:90px;
background:#a78bfa;
transition:0.3s;
}

.card:hover{
transform:rotateY(20deg) rotateX(10deg);
}
</style>

<div class="container">
<div class="card"></div>
</div>

More CSS 3D Transforms Examples (8)

example RotateX Transform open example example RotateY Transform open example example RotateZ Transform open example example Perspective Example open example example TranslateZ Transform open example example Preserve 3D open example example Simple 3D Cube Face open example example 3D Button Press Effect open example