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

Question

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

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

Answer 1

您可以通过在 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- ...）。这取决于您支持的浏览器。

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

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

jquery

css

animation

orientation

tilt