mousemove jquery上的多个转换 [英] Multiple Transforms on mousemove jquery

问题描述

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

Probably an easy fix, but for the life of me I can't figure it out or may be overthinking it. In short I have a div that rotatesY based on mousemove. I have that working, but I also need it to translate across the X axis as well. So I know I have to use transform: translateX(value), but not sure how to apply two transforms the best way in jquery. Thanks for the help. Fiddle link below.

还有办法更改rotationY方向吗？

Also is there a way to change the rotationY directions?

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/

这篇关于mousemove jquery上的多个转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！