CSS和HTML:苹果手机喜欢图像的3D浮动效果

Question

其实我不知道该怎么称呼它，但我已经看到了-(实际上我没有iPhone 但我没看错！在某些苹果手机中(部分或全部？ 有一个系统，例如当我们旋转手机时 显示图标和其他工作人员就像漂浮在这里和那里稍微移动。

如果我可以在我的网站上使用它，这对我来说很酷。我需要知道如何使用CSS,HTML制作这样的 HTMLimg，无论是否使用JAVASCRIPT或JQUERY。但是，我不需要旋转手机(当然没有手机(，而是使用鼠标指针来完成它。示例代码或代码链接将很有用。

如果已经有这样的答案问题，请将其标记为重复(很高兴(:)

Answer 1

听起来你必须使用渐进式Web应用程序，这将允许您使用本机功能 - 在这种情况下，获取用户手机的移动。这样，您将能够根据设备移动/旋转将 3D 变换应用于 DOM 元素。

如果你想坚持使用光标作为动画输入，有很多库和现成的例子来确切地展示如何做到这一点。

此外，它已经成为StackOverflow上非常知名的主题，因此您只需搜索一下即可找到完美的解决方案。

StackOverflow： https://stackoverflow.com/a/35016817/8923822
CodePen by Thomas Podgrodzki： https://codepen.io/Podgro/pen/WQpEwY/

!(function ($doc, $win) {
var screenWidth = $win.screen.width / 2,
screenHeight = $win.screen.height / 2,
$elems = $doc.getElementsByClassName("elem"),
validPropertyPrefix = '',
otherProperty = 'perspective(1000px)',
elemStyle = $elems[0].style;
if(typeof elemStyle.webkitTransform == 'string') {
validPropertyPrefix = 'webkitTransform';
} else if (typeof elemStyle.MozTransform == 'string') {
validPropertyPrefix = 'MozTransform';
}
$doc.addEventListener('mousemove', function (e) {
var centroX = e.clientX - screenWidth,
centroY = screenHeight - (e.clientY + 13),
degX = centroX * 0.04,
degY = centroY * 0.02,
$elem
for (var i = 0; i < $elems.length; i++) {
$elem = $elems[i];
$elem.style[validPropertyPrefix] = otherProperty + 'rotateY('+ degX +'deg)  rotateX('+ degY +'deg)';
};
});
})(document, window);

Answer 2

您始终可以使用第三方库。 动画.css

对于您的特定动画，我相信Shake将是合适的动画。 转到他们的 github 页面以获取更多信息。我几乎在我的每个网站中都使用它来添加动画。希望对您有所帮助！