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

How to create animated element that follows browser like on http://metalab.co/projects/swivl/?

如何创建像 http://metalab.co/projects/swivl/ 一样跟随浏览器的动画元素?

我试着查看那里的 html 代码,但 div 上只有一个过渡,它包含 ipad 背景图像。 我一直无法弄清楚是什么 css/ js 导致了这种效果,使得 ipad 转向并跟随访问者的鼠标位置(左右平移)

您可以通过在 mousemove 上设置元素的变换 属性 来做到这一点。

像这样:

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

fiddle

它将在最新的 chrome 和 ff 中工作。请注意,您可以为转换属性使用浏览器前缀(-webkit-、-moz- ...)。这取决于您支持的浏览器。