<div style="height:80px;">
<div onmouseover="rotateDIV()" id="rotatetop" style="transform: rotate(39deg);">top to bottom</div>
<div onmouseover="rotateYDIV()" id="rotateleft" style="transform: rotateY(180deg);">left to right</div>
</div>

#rotatetop,#rotateleft {    width: 100px;    height: 90px;    color: white;    position:relative;    font-weight:bold;    font-size:15px;    padding:10px;    float:left;    margin-right:50px;    border-radius:20px;    border:1px solid #000000;    background:red;    margin:10px;}

var x,y,n=0,ny=0,rotINT,rotYINT
function rotateDIV()
{
x=document.getElementById("rotatetop")
clearInterval(rotINT)
rotINT=setInterval("startRotate()",10)
}
function rotateYDIV()
{
y=document.getElementById("rotateleft")
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}
}
}