我想做一个jQuery脚本,可以根据浏览器窗口中鼠标的位置旋转div内的元素。
比例大致为:
最大像素x轴:2° = 中心像素x轴:0°
y轴同理。
如果光标位于屏幕中心,则不进行旋转。否则,必须将其从0°旋转到2°(或根据相对笛卡尔平面上的屏幕位置而定的负值)。因此,这是一种具有即时反馈的动态旋转。
就像您在这里看到的:http://css3playground.com/flashlight.php(从菜单中选择“斜角”),但使用
现在我尝试使用transit.js,使用sin和cos代替度数(从0到1的“度数”将产生结果)。我知道这不是正确的方法,但这是我想象中获得低度数的最接近方法。
但是结果并不是我所期望的。div元素旋转了(但是是错误的方向),但是没有动态效果。
我该怎么做?
示例: http://jsfiddle.net/lucgenti/LtWtW/11/
比例大致为:
最大像素x轴:2° = 中心像素x轴:0°
y轴同理。
如果光标位于屏幕中心,则不进行旋转。否则,必须将其从0°旋转到2°(或根据相对笛卡尔平面上的屏幕位置而定的负值)。因此,这是一种具有即时反馈的动态旋转。
就像您在这里看到的:http://css3playground.com/flashlight.php(从菜单中选择“斜角”),但使用
transform:rotate
而不是text-shadow
。现在我尝试使用transit.js,使用sin和cos代替度数(从0到1的“度数”将产生结果)。我知道这不是正确的方法,但这是我想象中获得低度数的最接近方法。
var max_x = $(window).width();
var max_y = $(window).height();
var center_x = (max_x/2);
var center_y = (max_y/2);
$(document).mousemove(function(e) {
var mouse_x = e.pageX,
mouse_y = e.pageY,
hypotenuse = Math.sqrt(Math.pow((mouse_x-center_x),2)+Math.pow((mouse_y-center_y), 2)),
cos = (mouse_x-center_x)/hypotenuse,
sin = (mouse_y-center_y)/hypotenuse;
$('#div1, #div2').transition({ perspective: '400px', rotateX: sin, rotateY: cos });
});
但是结果并不是我所期望的。div元素旋转了(但是是错误的方向),但是没有动态效果。
我该怎么做?
示例: http://jsfiddle.net/lucgenti/LtWtW/11/