Gyro 3D Card

admin1234
Feb 08, 2026 7
Live Preview

Live Editor

<div class="scene">
  <div class="card" id="card">
    <img src="https://plus.unsplash.com/premium_photo-1661889099855-b44dc39e88c9?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjV8fGZyZWUlMjBpbWFnZXN8ZW58MHx8MHx8fDA%3D">
    <div class="tap">Tap once to enable motion 📱</div>
  </div>
</div>
body{
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  background:#020617;
  font-family:system-ui;
}

/* Enable perspective */
.scene{
  perspective:1000px;
}

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

/* Image depth */
.card img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:20px;
  transform:translateZ(40px);
}

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

/* Tap hint */
.tap{
  position:absolute;
  bottom:-42px;
  width:100%;
  text-align:center;
  font-size:13px;
  color:#cbd5f5;
  opacity:.8;
}
const card = document.getElementById("card");

/* ===== DESKTOP MOUSE ===== */
card.addEventListener("mousemove", e=>{
  const r = card.getBoundingClientRect();
  const x = e.clientX - r.left;
  const y = e.clientY - r.top;

  const rx = -(y - r.height/2) / 14;
  const ry =  (x - r.width/2) / 14;

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

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

/* ===== MOBILE GYRO ===== */
function enableGyro(){
  if (
    typeof DeviceOrientationEvent !== "undefined" &&
    typeof DeviceOrientationEvent.requestPermission === "function"
  ){
    DeviceOrientationEvent.requestPermission()
      .then(state=>{
        if(state==="granted"){
          window.addEventListener("deviceorientation", handleGyro);
        }
      });
  } else {
    window.addEventListener("deviceorientation", handleGyro);
  }
}

function handleGyro(e){
  const x = Math.max(-20, Math.min(20, e.beta));
  const y = Math.max(-20, Math.min(20, e.gamma));

  card.style.transform =
    `rotateX(${-x/2}deg) rotateY(${y/2}deg)`;
}

/* Tap to activate on mobile */
card.addEventListener("click", enableGyro, { once:true });
Categories

Gyro 3D Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
