CSS карточка с параллакс-эффектом через pointermove и кастомные CSS-переменные

<div class="ring" style="--i: 2">

.ring {
  translate: calc(var(--px) * (var(--i) * -2rem))
             calc(var(--py) * (var(--i) *  2rem));
}

Фишка: координаты курсора мапятся в поворот карточки по 3D-оси,
а кольца двигаются по 2D-плоскости для создания иллюзии объёма 🤙

@WebDev_Plus