Rotasjon

.rotitem{
    background-color:white;
    padding:10px;
    border-style:solid;
    border-width:1px;
    border-color:gray;
    color:#990000;
    opacity:0.9;
    /* default*/
    width:300px;
}
.rotate
{
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
 
    -webkit-transition-duration:4s;
    transition-duration:4s;
}
#atable{border-spacing: 0px;}
#atable td{
    font-size:30px;
    border-style:solid;
    border-width:thin;
    text-align:center;
    opacity:1;
    background-color:white;
    padding:5px
    
}

function doIt(divId){
    var elt=document.getElementById(divId);
    doItElt(elt);
}
function doItElt(elt){
    elt.classList.toggle("rotate");
    doReset(elt);
}
function doItSelected(selector){
    var elt=document.querySelector(selector);
    doItElt(elt);
}
function doReset(elt){
    setTimeout(function(){
        elt.classList.remove("rotate");
    },4000);
}

//canvas
var rotimg = new Image();   
rotimg.src = 'bs8.png';
var rotcid='canvasid'
var deltaAngle=2.7;
function drawHead()
{
    var canvas = document.getElementById(rotcid);
    if (canvas.getContext)
    {
        var dc = canvas.getContext('2d');
        dc.restore();
        dc.fillStyle="rgb(256,256,256)";
        dc.fillRect(0,0,400,400);
        dc.translate(50,50);
        // rotate opposite, converted to rads        
        dc.rotate(-deltaAngle*(6.28/360));
        dc.drawImage(rotimg, -25, -25, 50, 50);
        dc.translate(-50,-50);
        setTimeout(drawHead,100);
        dc.save();
    } 
    else 
    {
          // canvas-unsupported
          alert('cannot do canvas');
    }
}
//eofcanvas