<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <div class="par"> <div id="as" class="con"></div> </div> </body> </html> <style> .par{ perspective:800px; } .con{ transform:matrix(1,0,0,1,0,0); margin-left:300px; height:400px; width:500px; background-color:white; background-image:url(http://element-cn.eleme.io/static/web.61b1f33.png); background-size:100% 100%; box-shadow: 0 0 20px 8px #eeeeee; /*transform:rotateX(1deg) rotateY(1deg);*/ } </style> <script> document.getElementById("as").addEventListener("mousemove",function(e){ var _this = e; var _x = -((parseFloat(_this.pageX) - 350)/250).toFixed(2)*2; var _y = -((parseFloat(_this.pageY) - 200)/200).toFixed(2)*2; var attributes = "rotateX(45deg) rotateY(45deg)"; this.style.transform = "rotateX("+_y+"deg) rotateY("+_x+"deg)"; }) </script>
