Карточки как в Steam

Question

В десктопной версии Steam карточки игр имеют красивую анимацию.

Я попытался их воссоздать, но работают они у меня странно:

"use strict";

const card = document.querySelector('.card-box');

card.addEventListener('mousemove', rotate, { capture: true });
card.addEventListener('mouseout', rotateout, { capture: true });

function rotate(e) {
  this.style.transition = 'none';

  const rect = this.getBoundingClientRect(),
    cardW = rect.width,
    cardH = rect.height;

  let xFormula = e.clientX - (rect.left + cardW / 2),
    yFormula = e.clientY - (rect.top + cardH / 2);

  let resY = yFormula,
    resX = xFormula;

  // console.log(`${resX}, ${resY}`)

  this.style.transform = `rotateY(${resX}deg) rotateX(${resY}deg)`;
}

function rotateout(e) {
  this.style.transition = 'transform 0.2s linear';
  this.style.transform = 'rotateX(0)';
  this.style.transform = 'rotateY(0)';
}

.card-box {
  transform-style: preserve-3d;
  perspective: 500px;
  }

.card {
  width: 150px;
  height: 175px;
  border: 3px solid #000;
  text-align: center;
  margin: 200px auto;
}

<div class="card-box">
  <div class="card">карта</div>
</div>

Вопрос: как сделать, чтобы карточки наклонялись так же, как в Steam.

~~Оправдание~~: плохо умею создавать элементы интерфейса подобной сложности.

"use strict";

const cardBox = document.querySelector('.card-box'),
  card = document.querySelector('.card');

cardBox.addEventListener('mousemove', rotate, {
  capture: true
});
cardBox.addEventListener('mouseout', rotateout, {
  capture: true
});

function rotate(e) {
  const rect = this.getBoundingClientRect(),
    w = rect.width / 10,
    h = rect.height / 10,
    x = (e.clientX - w) / 2,
    y = (e.clientY - h) / 2;

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

function rotateout(e) {
  card.style.transform = 'rotateX(0) rotateY(0)';
}

.card-box {
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  transition: .1s linear;
  width: 150px;
  height: 175px;
  border: 3px solid #000;
  text-align: center;
  margin: 200px auto;
}

<div class="card-box">
  <div class="card">карта</div>
</div>

Answer 1

Делается это вот так

Большая работа на css в которой делаем перспективу а вот при наведении в зависимости от курсора меняем угол наклона

Для адаптивности - достаточно просто изменить font с 200px на 20vw

document.getElementById('perspective').addEventListener('mousemove', function(e) {
  var w = window.innerWidth / 2;
  var h = window.innerHeight / 2;
  var x = (e.pageX - w) / 10;
  var y = (e.pageY - h) / 10;
  document.getElementById('object').style.transform = 'rotateX(' + y + 'deg) rotateY(' + x + 'deg)';
});

body {
  margin: 0;
}

html,
body,
#perspective {
  height: 100%;
}

#perspective {
  perspective: 1000px;
  /* center object */
  display: flex;
  align-items: center;
  justify-content: center;
}

#object {
  transition: 300ms ease-out;
  /* optional */
  background: #bbb;
  padding: 20px;
  /* example content */
  font: bold 20vw sans-serif;
}

<div id="perspective">
  <div id="object">3D</div>
</div>

БЛОГ НА HUSL

Карточки как в Steam

Ответы (1 шт):