mousemove 上的多个变换 jquery

Question

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

还有办法改变旋转 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/

mousemove 上的多个变换 jquery

Multiple Transforms on mousemove jquery

javascript

jquery

rotation

transform

mousemove