Perspective Transformations Based On Mouse Movement

transform.js

transformElement(mouseEvent) {
      const TRANSFORM_SCALE = 15
      const _mouseCoords = {
        x: mouseEvent.clientX,
        y: mouseEvent.clientY
      }
      const _window = {
        height: window.innerHeight,
        width: window.innerWidth
      }
      const _midpoint = {
        x: _window.width / 2,
        y: _window.height / 2,
      }
      const _position = {
        x: _mouseCoords.x - _midpoint.x,
        y: _mouseCoords.y - _midpoint.y
      }
      const _movement = {
        x: (_position.x / _midpoint.x) * TRANSFORM_SCALE,
        y: (_position.y / _midpoint.y) * (-1 * TRANSFORM_SCALE)
      }
      if (this.loginTransform.enabled) {
        this.loginTransform.style = {
          transform: `perspective(100vw) rotateY(${_movement.x}deg)`
                     + `rotateX(${_movement.y}deg)`,
        }
      }
    },