Вращение блока при движении мышкой

#javascript #jquery #css #transform

Нужна анимация как на сайте https://openai.com/
Карточка сверху в правом блоке и ряд внизу.

Кратко:
При движении мыши над блоком-карточкой, сторона над которой находится мышь как бы
отдалялась

Понятно, что это transform rotate X,Y,Z. Но как рассчитываются координаты, может
это плагин какой-то? 
Но лучше реализацию без плагина на jQuery.
    

Ответы

Ответ 1

Можно привязать свойство rotateX и rotateY к CSS-переменным и на лету менять их значение
через JS. Чувствительность к движению мыши задается коэффициентом 30, чем он выше,
тем менее картинка реагирует на движение мыши.



const img = document.querySelector("img");

document.addEventListener("mousemove", function (e) {
  move (e.clientX, e.clientY);
});

function move (x, y) {
  let wh = window.innerHeight / 2,
  ww = window.innerWidth / 2;
  
  document.body.style.setProperty('--mouseX', (x - ww) / 30 + "deg");
  document.body.style.setProperty('--mouseY', (y - wh) / 30 + "deg");
}
:root {
  --mouseX: 0deg;
  --mouseY: 0deg;
}

body {
  display: flex;
  min-height: 100vh;
}

img {
  width: 50vmin;
  height: 50vmin;
  margin: auto;
  transform: rotateX(calc(var(--mouseY))) rotateY(calc(var(--mouseX)));
}



Ответ 2

Получилось так. Особо не думал над названиями переменных. Главное работает



let $img = $('.card');

function move(x, y) {
  // обертка с доп свойствами
  $img.addClass('card-active');

  // центр карточки
  let xser = $img.offset().left + $img.width() / 2;
  let yser = $img.offset().top + $img.height() / 2;

  // координаты мыши относительно центра карточки
  let otnX = x - xser;
  let otnY = y - yser;

  // вычисляем % - на каком расстоянии мышь от середины до края, центр = 0%
  let raznX = otnX / $img.width() * 100 * 2;
  let raznY = otnY / $img.height() * 100 * 2;

  // на сколько градусов нужно повернуть (100% = 6deg)
  let trX = raznY / 100 * 6 * -1;
  let trY = raznX / 100 * 6;

  // окруление
  trX = Math.round(trX * 1000) / 1000;
  trY = Math.round(trY * 1000) / 1000;

  // в css
  $img.css('transform', 'rotateY(' + trY + 'deg) rotateX(' + trX + 'deg) rotateZ(0deg)
scale(1.05)');
}

function resetTransform() {
  $img.removeClass('card-active');
  $img.css('transform', 'rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1)');
}

$img.mousemove(function(e) {
    move(e.pageX, e.pageY);
  })
  .mouseout(function(e) {
    resetTransform();
  });
.card-wrapper {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.card {
  background: linear-gradient(45deg, #1e5799 0%, #bab523 19%, #210611 37%, #e23424
66%, #28fcdc 84%, #764682 100%);
  display: block;
  position: relative;
  width: 220px;
  height: 320px;
  margin: 50px auto;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.card img {
  width: 100%;
  height: 100%;
}

.card img:before {
  position: absolute;
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #000;
  left: 50%;
  top: 50%;
}

.card-active {
  transition: transform .4s cubic-bezier(0, 0, .2, 1), filter .15s cubic-bezier(0,
0, .2, 1);
}


  


  



Ответ 3

Этот эффект называется что-то вроде Parallax effect for cards.

Один из примеров реализации — Create an Apple TV Poster Parallax Effect in CSS3 &
jQuery, но с использованием jQuery.

Ребята с https://openai.com/ всё на чистом JavaScript реализацию написали. Также
с использованием CSS анимации само собой (для переходов). Но они JS обфусцировали.
Может быть вы или кто-то другой захочет реверс-инжиниринг провести.