3D旋转仿伪3D立体效果，手机端

Posted 2020-10-10 小前端学习

偶然在书上看到这段代码，感觉很舒服，直街附代码吧，原生JS。手机端旋转效果仿立体效果。

纯JS代码足够了、

var img=document.createElement(‘img‘);
 img.setAttribute(‘src‘,‘1.png‘);
 function handle(e) {
   var alpha = e.alpha, beta = e.beta, gamma = e.gamma;
   img.style.webkitTransform = "rotateZ(" + alpha + "deg) rotateX(" + beta + "deg) rotateY(" + gamma + "deg)";
 }
 document.body.appendChild(img);
window.addEventListener(‘deviceorientation‘,handle,false);
有兴趣的童鞋可以试试，比较有趣。