3D Parallax Card

admin1234
Feb 08, 2026 6
Live Preview

Live Editor

<div class="scene">
  <div class="card" id="card">
    <div class="shadow"></div>
    <img src="https://images.unsplash.com/photo-1526779259212-939e64788e3c?q=80&w=1748&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
  </div>
</div>
body{
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  background:#020617;
  font-family:system-ui;
}

/* Perspective wrapper */
.scene{
  perspective:900px;
}

/* Card */
.card{
  width:300px;
  height:300px;
  border-radius:18px;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .15s ease-out;
  background:#0f172a;
  box-shadow:
    0 30px 60px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Image layer */
.card img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:18px;
  transform:translateZ(40px);
  transition:transform .15s ease-out;
}

/* Light reflection */
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,.25),
    rgba(255,255,255,0)
  );
  opacity:.3;
  transform:translateZ(60px);
  pointer-events:none;
}

/* Depth shadow */
.shadow{
  position:absolute;
  inset:12px;
  background:#000;
  filter:blur(40px);
  opacity:.45;
  transform:translateZ(-40px);
  border-radius:18px;
}
const card = document.getElementById("card");
const rect = ()=>card.getBoundingClientRect();

document.addEventListener("mousemove", e=>{
  const r = rect();
  const x = e.clientX - r.left;
  const y = e.clientY - r.top;

  const centerX = r.width / 2;
  const centerY = r.height / 2;

  const rotateX = -(y - centerY) / 12;
  const rotateY = (x - centerX) / 12;

  card.style.transform =
    `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});

document.addEventListener("mouseleave", ()=>{
  card.style.transform =
    `rotateX(0deg) rotateY(0deg)`;
});
Categories

3D Parallax Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
