Interactive Depth Tilt Card

An interactive depth tilt card built with pure HTML and CSS that simulates 3D depth by tilting in response to user interaction, creating an engaging visual effect without relying on JavaScript or external libraries.

Usage

This component is ideal for interfaces where interactive visual depth enhances engagement, such as feature cards, product previews, portfolio sections, or modern UI layouts that benefit from subtle 3D feedback.

Implementation

The depth tilt effect is achieved using CSS transforms, perspective, and transitions, allowing the card to respond smoothly to interaction while remaining lightweight and easy to integrate.

HTML

<div class="card-tilt-wrap">
  <div class="card-tilt">
    <h4>Card title</h4>
    <p>Short description</p>
  </div>
</div>

<div class="card-tilt-wrap">
  <div class="card-tilt">
    <h4>Card title</h4>
    <p>Short description</p>
  </div>
</div>

CSS

.card-tilt-wrap {
  perspective: 800px;
}

.card-tilt {
  width: 200px;
  padding: 1rem;
  border-radius: 18px;

  background: #ffffff;
  color: #111827;

  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
  text-align: center;

  transform-style: preserve-3d;
  will-change: transform;

  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

.card-tilt:hover,
.card-tilt:focus-visible {
  transform: translateY(-4px) rotateX(8deg);
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.18);
}

.card-tilt h4 {
  font-size: 14px;
  margin-bottom: 0.25rem;
}

.card-tilt p {
  font-size: 12px;
  color: #4b5563;
}

@media (prefers-color-scheme: dark) {
  .card-tilt {
    background: #111827;
    color: #e5e7eb;
  }

  .card-tilt p {
    color: #d1d5db;
  }
}

.card-tilt-wrap {
  perspective: 800px;
}

.card-tilt {
  width: 200px;
  padding: 1rem;
  border-radius: 18px;

  background: #ffffff;
  color: #111827;

  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
  text-align: center;

  transform-style: preserve-3d;
  will-change: transform;

  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

.card-tilt:hover,
.card-tilt:focus-visible {
  transform: translateY(-4px) rotateX(8deg);
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.18);
}

.card-tilt h4 {
  font-size: 14px;
  margin-bottom: 0.25rem;
}

.card-tilt p {
  font-size: 12px;
  color: #4b5563;
}

@media (prefers-color-scheme: dark) {
  .card-tilt {
    background: #111827;
    color: #e5e7eb;
  }

  .card-tilt p {
    color: #d1d5db;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses tilt-based depth interaction
• Enhances engagement with subtle 3D motion
• Smooth transitions without layout shift
• Works in modern browsers

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.