javascript – Rotation of the block when moving the mouse

Question:

Animation is needed as on the site https://openai.com/ The card is on top in the right block and the row is at the bottom.

Briefly: When moving the mouse over the block-card, the side over which the mouse is located seemed to move away

It is clear that this is transform rotate X,Y,Z. But how are the coordinates calculated, maybe it's some kind of plugin? But a better implementation without a jQuery plugin.

Answer:

You can bind rotateX and rotateY to CSS variables and change their value on the fly through JS. The sensitivity to mouse movement is set by a factor of 30, the higher it is, the less the picture reacts to mouse movement.

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)));
}
<img src="http://www.pngmart.com/files/3/Sports-Ball-PNG-Photos.png">
Post Views: 4
Scroll to Top