Ajax Loader
×
HTML
<div onmouseover="rotateYDIV()" id="rotate3D">3D</div>
1
<div onmouseover="rotateYDIV()" id="rotate3D">3D</div>
 
CSS
div{width:200px;height:200px;background:green;color:#fff;transform: rotate3d(0,0,0,99deg);text-align:center;font:bold 140px/200px Arial;}
1
div{width:200px;height:200px;background:green;color:#fff;transform: rotate3d(0,0,0,99deg);text-align:center;font:bold 140px/200px Arial;}
 
JavaScript
var x,y,n=0,ny=0,rotINT,rotYINT
1
var x,y,n=0,ny=0,rotINT,rotYINT
2
function rotateYDIV()
3
{
4
y=document.getElementById("rotate3D")
5
clearInterval(rotYINT)
6
rotYINT=setInterval("startYRotate()",10)
7
}
8
function startYRotate()
9
{
10
ny=ny+1
11
y.style.transform="rotate3d(" + ny + "," + (ny-5) + "," + ny + "," + ny + "deg)"
12
if (ny==180 || ny>=360)
13
  {
14
  clearInterval(rotYINT)
15
  if (ny>=360){ny=0}
16
  }
17
}
 

Untitled

CSSDeck G+