<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}
}
}

<iframe src="https://www.netbax.net/tab/css/css-3d-transforms-property.html" style="width: 550px; height:550px;" frameborder="0"></iframe>