JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<div style="margin: 20px">
<div class="scene">
  
  
  <div class="element"></div>
  
  
  
</div>

</div>

CSS

.scene {
  width: 600px;
  height: 600px;
  background: gainsboro;
  position: relative;
  perspective: 100px;
}

.element {
  background: gray;
  width: 200px;
  height: 200px;
  margin: 200px;
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

JavaScript

function getMousePosition(element, event) {

	console.dir(element)

	return {
  	x: 0,
    y: 0
  }
}

$('.scene').mousemove(e => {

	e = e.originalEvent
  
  console.clear()
  console.log(getMousePosition(document.querySelector('.scene'), e).y)
  
})