jquery mousemove转换3d形状的x和y

Question

我想根据鼠标在屏幕上的位置使3d元素在x和y轴上旋转。我已经成功地在X位置或Y位置上发生了这种情况，但是无法让它同时在两个位置上运行。

我的代码：

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)");
});

有一个codepen： https://codepen.io/asmundsol/pen/PRXZRa

Answer 1

var $document = $(document);

$document.mousemove(function(e) {
    var height = $document.height() / 60;
    var pageY = e.pageY / height;
    var valueY = 180 - pageY;
        var width = $document.width() / 40;
    var pageX = e.pageX / width;
    var valueX = 125 - pageX;

    $(".cube").css("transform", "rotateZ(" + valueY + "deg) rotateY(" + valueX + "deg)");    
});