鼠标移动 jquery 上的多个转换

Multiple Transforms on mousemove jquery

本文关键字：转换 移动 jquery 鼠标      更新时间：2023-09-26
可能

很容易解决，但对于我的生活，我无法弄清楚，或者可能想多了。简而言之，我有一个基于鼠标移动旋转 Y 的div。我有这项工作，但我也需要它跨 X 轴平移。所以我知道我必须使用 transform： translateX（value），但不确定如何在 jquery 中以最佳方式应用两个转换。感谢您的帮助。下面的小提琴链接。

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

只需同时应用它：

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/

相关文章：