jQuery set tranform3d effect

enter image description here

Trying to create this mouse tracking effect – which causes a transform3d change on the block and contents – and also adds a flash light where the mouse is.

How would you write this in vanilla js so it’s stable – I am not sure on the formula used to calculate these degree changes – as they seem to go min -8 to max 9 degrees.

https://jsfiddle.net/qzo3ck5m/46/

var myElement = $("#p1");

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


myElement.mousemove(function(event) {
  console.log("mousemoveY---", event.clientX, event.clientY);

  let y = event.clientY;
  let x = event.clientX;

  var position = {
    top: myElement[0].offsetTop,
    left: myElement[0].offsetLeft
  };

  console.log("x", x);
  console.log("y", y);

  console.log("position", position);

  let degx = position.left - x;
  let degy = position.top - y;

  console.log("degx", degx);
  console.log("degy", degy);

  let fullDegrees = 8;

  setTranslate(-degx / 20, -degy / 20, 0, myElement[0]);
});


myElement.mouseleave(function() {
  console.log("mouseleave");
  setTranslate(0, 0, 0, myElement[0]);
});
.container {
  padding: 40px;
}

.blockwrapper {
  will-change: transform;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  margin: 10px;
}

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

.moved {
  background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="container">
  <div class="blockwrapper">
    <div class="block moved">Moved</div>
  </div>
  <div id="p1" class="blockwrapper">
    <div class="block">Movable</div>
  </div>
</div>