Mouse 3D Card

admin1234
Feb 07, 2026 5
Live Preview

Live Editor

<div class="scene">
  <div class="card" id="card">
    <div class="icon">
      <div class="icon-box" id="icon">🚀</div>
    </div>

    <div class="content">
      <h3>Mouse 3D Icon</h3>
      <p>
        Icon rotates with cursor,
        giving real 3D depth.
      </p>
    </div>
  </div>
</div>
body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#020617;
  font-family:system-ui, sans-serif;
}

/* 3D Scene */
.scene{
  perspective:1400px;
}

/* Card */
.card{
  width:300px;
  height:300px;
  border-radius:26px;
  background:linear-gradient(160deg,#0f172a,#020617);
  position:relative;
  transform-style:preserve-3d;
  transition:transform .15s ease-out;
  box-shadow:0 50px 100px rgba(0,0,0,.75);
}

/* Glass layer */
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(
    135deg,
    rgba(255,255,255,.18),
    rgba(255,255,255,.02)
  );
  pointer-events:none;
}

/* ICON CONTAINER */
.icon{
  position:absolute;
  top:50%;
  left:50%;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) translateZ(70px);
}

/* ICON */
.icon-box{
  width:90px;
  height:90px;
  border-radius:22px;
  background:linear-gradient(135deg,#38bdf8,#6366f1);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:38px;
  color:#020617;
  position:relative;
  box-shadow:
    0 25px 40px rgba(0,0,0,.6),
    inset 0 2px 6px rgba(255,255,255,.5);
  transform-style:preserve-3d;
  transition:transform .15s ease-out;
}

/* Fake depth */
.icon-box::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:#1e293b;
  transform:translateZ(-18px);
  filter:blur(6px);
  opacity:.6;
}

/* Text */
.content{
  position:absolute;
  bottom:36px;
  left:32px;
  right:32px;
  transform:translateZ(45px);
  color:#fff;
}

.content h3{
  margin:0 0 6px;
  font-size:20px;
}

.content p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:#c7d2fe;
}
const card = document.getElementById("card");
const icon = document.getElementById("icon");

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

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

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

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

  icon.style.transform =
    `rotateX(${rotateX * 1.4}deg)
     rotateY(${rotateY * 1.4}deg)
     translateZ(40px)`;
});

card.addEventListener("mouseleave", () => {
  card.style.transform = "rotateX(0) rotateY(0)";
  icon.style.transform = "rotateX(0) rotateY(0) translateZ(40px)";
});
Categories

Mouse 3D Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
