javascript - mousemove jquery 上的多重转换

Question

可能是一个简单的解决办法，但对于我的一生来说，我无法弄清楚或者可能想得太多了。简而言之，我有一个基于 mousemove 旋转的 div。我已经可以工作了，但我还需要它在 X 轴上平移。所以我知道我必须使用transform:translateX(value)，但不确定如何在jquery中应用两个变换的最佳方式。谢谢您的帮助。下面的 fiddle 链接。

还有办法改变旋转Y方向吗？

var $window = $(window),
    $box = $('#box')
    rotation = 0;

$window.on('mousemove', function(event){    
    rotation = (event.pageX/$window.width()*90) - 45;
    $box.css('transform', 'perspective( 600px ) rotateY(' + rotation + 'deg)');
});

#box{
    width: 300px;
    height: 300px;
    margin: 30px auto;
    background: #aaa;
}

<div id="box"></div>

http://jsfiddle.net/6gbhfxrx/

Answer 1

只需同时应用即可:

var $window = $(window),
    $box = $('#box');

$window.on('mousemove', function(event){    
    var rotation = (event.pageX/$window.width()*90) - 45;
    var transX= (event.pageX/$window.width()*500) - 250;
    $box.css('transform', 'perspective( 600px ) rotateY(' + rotation + 'deg) translateX(' + transX + 'px)');
});

这是一个 fiddle :http://jsfiddle.net/6gbhfxrx/2/