jquery - 如何在 http://metalab.co/projects/swivl/ 上创建跟随浏览器的动画元素？

Question

如何在http://metalab.co/projects/swivl/上创建跟随浏览器的动画元素？

我尝试查看那里的 html 代码，但在包含 ipad 背景图像的 div 上只有一个转换。我一直无法弄清楚是什么 css/js 导致了这种效果，使 ipad 转动并跟随访问者的鼠标位置（左右平移）

Answer 1

you can do this by setting the transform property of an element on mousemove.

Like so:

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

see the fiddle

it will work in newest chrome and ff. note that you may use browser prefixes for the transform attribute (-webkit-, -moz- ...). it depends on your supported browsers.