<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title></title> </head> <body> <style type="text/css"> #rotate3D { width: 80px; height: 70px; color: white; position: relative; font-weight: bold; font-size: 15px; padding: 10px; float: left; margin-right: 50px; border-radius: 5px; border: 1px solid #000000; background: red; margin: 10px; } </style> <script type="text/javascript"> var x,y,n=0,ny=0,rotINT,rotYINT function rotateYDIV() { y=document.getElementById("rotate3D") clearInterval(rotYINT) rotYINT=setInterval("startYRotate()",5) } function startYRotate() { ny=ny+5 y.style.transform="rotateY(" + ny + "deg)" y.style.webkitTransform="rotateY(" + ny + "deg)" y.style.OTransform="rotateY(" + ny + "deg)" y.style.MozTransform="rotateY(" + ny + "deg)" if (ny==530 || ny>=1080) { clearInterval(rotYINT) if (ny>=1080){ny=0} } } </script> <div onmouseover="rotateYDIV()" id="rotate3D" style="transform: rotateY(0deg);">3D rotate</div> </body> </html>