Блок, как координатная плоскость

Question

У меня есть карточка, при наведение мыши на которую в консоль выводятся координаты относительно карты (top и left). Мне бы хотелось, чтобы координаты выводились от середины. То есть, если курсор справа от середины, то значение будет положительным, а если слева, то отрицательным. С Y также. Как это сделать, я даже не представляю. Вот код:

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

card.addEventListener('mousemove', skew, {
  capture: true
});

function skew(e) {
  card.style.transition = 'none';

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

  console.log(`${e.clientX - rect.left - (cardW)}:${e.clientY - rect.top}`);
}

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

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

Answer 1

Точно так же, как ты приводишь координаты к значению относительно верхнего левого угла, только теперь нужно вычитать координаты центра элемента.

Координаты центра можно вычислить прибавляя половину ширины и высоты к координатам верхнего левого угла:

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

card.addEventListener('mousemove', skew, {
  capture: true
});

function skew(e) {
  card.style.transition = 'none';

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

  console.log(`${e.clientX - (rect.left + cardW/2)}:${e.clientY - (rect.top + cardH / 2)}`);
}

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

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

БЛОГ НА HUSL

Блок, как координатная плоскость

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