"CSS3 2D Transforms"
Bootstrap 3.3.0 Snippet by megatela

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <script> <!-- var x,y,n=0,ny=0,rotINT,rotYINT function rotateDIV() { x=document.getElementById("rotate2D") clearInterval(rotINT) rotINT=setInterval("startRotate()",10) } function rotateYDIV() { y=document.getElementById("rotate3D") clearInterval(rotYINT) rotYINT=setInterval("startYRotate()",10) } function startRotate() { n=n+1 x.style.transform="rotate(" + n + "deg)" x.style.webkitTransform="rotate(" + n + "deg)" x.style.OTransform="rotate(" + n + "deg)" x.style.MozTransform="rotate(" + n + "deg)" if (n==180 || n==360) { clearInterval(rotINT) if (n==360){n=0} } } function startYRotate() { ny=ny+1 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==180 || ny>=360) { clearInterval(rotYINT) if (ny>=360){ny=0} } } //--> </script> <style> #rotate2D,#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> </head> <body> <div style="height:80px;"> <div onmouseover="rotateDIV()" id="rotate2D">2D rotate</div> <div onmouseover="rotateYDIV()" id="rotate3D">3D rotate</div> </div> </body> </html>
#rotate2D,#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; }
<script> <!-- var x,y,n=0,ny=0,rotINT,rotYINT function rotateDIV() { x=document.getElementById("rotate2D") clearInterval(rotINT) rotINT=setInterval("startRotate()",10) } function rotateYDIV() { y=document.getElementById("rotate3D") clearInterval(rotYINT) rotYINT=setInterval("startYRotate()",10) } function startRotate() { n=n+1 x.style.transform="rotate(" + n + "deg)" x.style.webkitTransform="rotate(" + n + "deg)" x.style.OTransform="rotate(" + n + "deg)" x.style.MozTransform="rotate(" + n + "deg)" if (n==180 || n==360) { clearInterval(rotINT) if (n==360){n=0} } } function startYRotate() { ny=ny+1 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==180 || ny>=360) { clearInterval(rotYINT) if (ny>=360){ny=0} } } //--> </script>

Related: See More


Questions / Comments: