Question

可能是一个简单的解决办法，但对于我的生活，我无法弄清楚或者可能是过度思考它。总之，我有一个基于mousemove旋转Y的div。我有这个工作，但我也需要它跨X轴平移。所以我知道我必须使用transform：translateX（value），但不确定如何在jquery中应用两个转换的最佳方式。谢谢您的帮助。下面的小提琴链接。

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

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

这是一个小提琴：http://jsfiddle.net/6gbhfxrx/2/

mousemove jquery上的多个转换

1 个答案: