上创建跟随浏览器的动画元素？ [关闭]

【问题标题】：How to create animated element that follows browser like on http://metalab.co/projects/swivl/? [closed]如何在 http://metalab.co/projects/swivl/ 上创建跟随浏览器的动画元素？ [关闭]
【发布时间】：2015-03-26 13:20:48
【问题描述】：

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

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

【问题讨论】：

标签： jquery css animation orientation tilt

【解决方案1】：

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

像这样：

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

【讨论】：