Tilted Hover Effect on Cards Using Transform

Add an elegant tilt effect to your cards when users hover over them, creating a dynamic 3D visual experience with simple CSS.

Card 1

Card 2

Card 3

Why this works

By combining 3D transforms and smooth transitions, we create an engaging interactive feel without the need for JavaScript libraries, improving the visual depth of cards.

Source Code

<div class="tilt-card">Card 1</div>
<div class="tilt-card">Card 2</div>
<div class="tilt-card">Card 3</div>

<style>
.tilt-card {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
  cursor: pointer;
}
.tilt-card:hover {
  transform: rotateX(10deg) rotateY(10deg) scale(1.05);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}
</style>