Parallax Card

<div class="parallax-card">
  <div class="parallax-inner">
    <div class="parallax-bg"></div>
    <div class="parallax-content">
      <h3 style="margin: 0 0 8px 0; font-size: 18px;">Parallax Card</h3>
      <p style="margin: 0; opacity: 0.9;">Hover for 3D effect</p>
    </div>
  </div>
</div>

.parallax-card {
  width: 300px;
  height: 200px;
  perspective: 1000px;
  cursor: pointer;
}
.parallax-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
}
.parallax-card:hover .parallax-inner {
  transform: rotateY(10deg) rotateX(10deg);
}
.parallax-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}
.parallax-bg {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 110%;
  height: 110%;
  background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);
  transform: translateZ(-20px);
  border-radius: 12px;
}