3D-наклон за курсором

Карточка наклоняется за мышью в перспективе, блик следует за курсором.

Наведите и водите по карточке.

наведи и веди

Код

<div class="tilt">
  <img src="photo.jpg">
  <div class="glare"></div>
</div>

<style>
.tilt { position: relative; overflow: hidden; border-radius: 20px;
  will-change: transform; }
.glare { position: absolute; inset: -50%; pointer-events: none;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,30%),
    rgba(255,255,255,.35), transparent 55%); }
</style>

<script>
var el = document.querySelector(".tilt");
el.addEventListener("pointermove", function (e) {
  var r = el.getBoundingClientRect();
  var nx = (e.clientX - r.left) / r.width - .5;
  var ny = (e.clientY - r.top) / r.height - .5;
  el.style.transition = "none";
  el.style.transform = "perspective(800px) rotateX(" + (-ny * 16) +
    "deg) rotateY(" + (nx * 16) + "deg)";
  el.style.setProperty("--gx", (nx + .5) * 100 + "%");
  el.style.setProperty("--gy", (ny + .5) * 100 + "%");
});
el.addEventListener("pointerleave", function () {
  el.style.transition = "transform .5s cubic-bezier(.16,1,.3,1)";
  el.style.transform = "perspective(800px)";
});
</script>

Промпт для ИИ

Сделай 3D-наклон карточки за курсором: на pointermove нормализуй позицию курсора внутри карточки к -0.5..0.5 и ставь transform: perspective(800px) rotateX(-ny*16deg) rotateY(nx*16deg) без transition; на pointerleave возвращай к perspective(800px) с transition 0.5s cubic-bezier(0.16,1,0.3,1). Добавь блик: слой с radial-gradient, центр которого следует за курсором через CSS-переменные --gx/--gy. На тач-устройствах отключай.