Javascript scroll animation of transform3d

I want to try and create this mouse tracking event – which causes a transform effect on the block and contents – and also adds this flash light

I’ve tried creating a basic set of blocks and transform and mouse tracking functions.

https://jsfiddle.net/qzo3ck5m/21/

html

<div class="container">
  <div class="block">Static</div>
  <div class="block moved">Moved</div>
  <div class="block">Static</div>
</div>

js

var myCircle = $(".moved")[0];
setTranslate(-32.277%, 2.465%, 0, myCircle);

function setTranslate(xPos, yPos, zPos, el) {
console.log("test")
el.style.transform = `translate3d(${xPos}, ${yPos}, ${zPos}) scale3d(1, 1, 1) rotateX(20deg) rotateY(10deg) rotateZ(0deg) skew(0deg, 0deg)`;
}

css

.container {
  padding: 40px;
}

.block {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  background-color: pink;
  will-change: transform;
  transform: translate3d(-32.277%, 12.465%, 0px) scale3d(1, 1, 1) rotateX(20deg) rotateY(10deg) rotateZ(0deg) skew(0deg, 0deg);
}

//mouse tracking

function coordinate(event) {
    let x = event.clientX;
    let y = event.clientY;
    document.getElementById("X").value = x;
    document.getElementById("Y").value = y;
}