I am trying to create a 3D element that rotates on both the x and y axes based on the position of the mouse on the screen. While I have successfully achieved this effect using either the X or Y position, I am struggling to make it work simultaneously for both positions.
Here is my current code snippet:
var $document = $(document);
$document.mousemove(function(e) {
var height = $document.height() / 60;
var pageY = e.pageY / height;
var valueY = 180 - pageY;
$(".cube").css("transform", "rotateZ(" + valueY + "deg)");
});
$document.mousemove(function(e) {
var width = $document.width() / 40;
var pageX = e.pageX / width;
var valueX = 125 - pageX;
$(".cube").css("transform", "rotateY(" + valueX + "deg)");
});
You can view a working example on CodePen: https://codepen.io/asmundsol/pen/PRXZRa