I'm trying to redo the animation that i saw on a site where an image changes it's x and y values with the mouvement of the mouse. The problem is that the origin of the mouse is in the top left corner and i'd want it to be in the middle. To understand better, here's how the mouse axis values work :

Now here's how i'd want it to be:

sorry for the bad quality of my drawings, hope you understand my point from those ^^

ps: i'm having a problem while trying to transform the x y values at the same time and i don't know why. here's what i wrote in javascript :

document.onmousemove = function(e){
            var x = e.clientX; 
            var y = e.clientY; 
            document.getElementById("img").style.transform = "rotateX(" x*0.005 "deg)";
            document.getElementById("img").style.transform = "rotateY(" y*0.005 "deg)";
        }

CodePudding user response：

You can find out how wide / tall the screen is:

const width = window.innerWidth;
const height = window.innerHeight;

So you can find the centre of the screen:

const windowCenterX = width / 2;
const windowCenterY = height / 2;

And transform your mouse coordinates appropriately:

const transformedX = x - windowCenterX;
const transformedY = y - windowCenterY;

Small demo:

const coords = document.querySelector("#coords");

document.querySelector("#area").addEventListener("mousemove", (event)=>{
  const x = event.clientX;
  const y = event.clientY;
  
  const width = window.innerWidth;
  const height = window.innerHeight;
  
  const windowCenterX = width / 2;
  const windowCenterY = height / 2;
  
  const transformedX = x - windowCenterX;
  const transformedY = y - windowCenterY;
  
  coords.textContent = `x: ${transformedX}, y: ${transformedY}`;
});

body, html, #area {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

#area {
  
  background-color: #eee;
}

#coords {
  position: absolute;
  left: 10px;
  top: 10px;
}

<div id="area"></div>
<div id="coords"></div>

CodePudding user response：

I think I would use the bounding rect of the image to determine the center based on the image itself rather than the screen... something like this (using CSSVars to handle the transform)

const img = document.getElementById('fakeimg')
addEventListener('pointermove', handler)


function handler(e) {
  const rect = img.getBoundingClientRect()
  const x1 = (rect.x   rect.width / 2)
  const y1 = (rect.y   rect.height / 2)
  const x2 = e.clientX
  const y2 = e.clientY
  let angle = Math.atan2(y2 - y1, x2 - x1) * (180 / Math.PI)   90
  angle = angle < 0 ?
    360   angle :
    angle

  img.style.setProperty('--rotate', angle);
}

*,
*::before,
*::after {
  box-sizeing: border-box;
}

html,
body {
  height: 100%;
  margin: 0
}

body {
  display: grid;
  place-items: center;
}

[id=fakeimg] {
  width: 80vmin;
  background: red;
  aspect-ratio: 16 / 9;
  --rotation: calc(var(--rotate) * 1deg);
  transform: rotate(var(--rotation));
}

<div id="fakeimg"></div>

CodePudding user response：

This is not "rotation"-per-se... The exact effect is called "tilting".
On their website you can find a file called vanilla-tilt.js.

Long story short, it functions by using rotateX() and rotateY() on a child element inside a perspective: 1000px parent. The values passed for the rotation are caltulated from the mouse coordinates inside the parent Element and transformed to a respective degree value.

Here's a quick simplified remake for one element only:

// DOM utility functions:

const el = (sel, par) => (par || document).querySelector(sel);


// Task: tilt element on mouse move:

const elWrap = el("#wrap");
const elTilt = el("#tilt");

const settings = {
  reverse: 1,
  max: 8,    // default = 35
  perspective: 1000,
  scale: 1,
  axis: null,
};

const tilt = (evt) => {
  const reverse = settings.reverse ? -1 : 1;
  const bcr = elWrap.getBoundingClientRect();
  let x = (evt.clientX - bcr.left) / bcr.width;
  let y = (evt.clientY - bcr.top) / bcr.height;
  x = Math.min(Math.max(x, 0), 1);
  y = Math.min(Math.max(y, 0), 1);
  let tiltX = (reverse * (settings.max / 2 - x * settings.max)).toFixed(2);
  let tiltY = (reverse * (y * settings.max - settings.max / 2)).toFixed(2);
  
  elWrap.style.transform = `
    perspective(${settings.perspective}px)
  `;
  
  elTilt.style.transform = `
    perspective(${settings.perspective}px)
    rotateX(${settings.axis === "x" ? 0 : tiltY}deg)
    rotateY(${settings.axis === "y" ? 0 : tiltX}deg)
    scale3d(${settings.scale}, ${settings.scale}, ${settings.scale})
  `;
}

elWrap.addEventListener("pointermove", tilt);

/*QuickReset*/ * {margin:0; box-sizing: border-box;}

html, body {
  height: 100vh;
}

#wrap {
  height: 100vh;
  display: flex;
}

#tilt {
  outline: 4px solid red;
  height: 60%; width: 60%; margin: auto;
}

<div id="wrap">
  <div id="tilt"></div>
</div>