HTML page Flip

Pageflip effect using only HTML and JS

HTML

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
    <div id="myCanvas">
    <div id="follow" class="circle follower">F</div>
    <div id="corner" class="circle">C</div>
    <div id="circConst" class="circle restrain">R</div>
    <div id="circConst2" class="circle restrain">R</div>
    <div id="spine" class="line"></div>
    <div id="spineBot" class="circle">SB</div>
    <div id="spineTop" class="circle">ST</div>
    <div id="spineMid" class="circle">SM</div>    
    <div id="bisect" class="circle">B</div> 
    <div id="fld" class="circle">F</div> 
    <div id="mask"><div id="page">aaaa aaaa aaaa aaaaaaaa aaaa aaaa 
        aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa 
        aaa aaaa aaaa aaaa vaaaa aaaa aaaa aaaa aaaa 
        <img src="http://s3.subirimagenes.com:81/avatar/previo/thump_6687482y1m2jge0s5iecbyrwbjz.png"></img> aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa
        aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa 
        aaaa aaaa aaaa aaaa aaaa  </div></div>
    
</div>

<br/><br/><br/><br/>
<input id="mx"></input><span>mx</span>
<input id="my">  </input><span>my</span>
<br/>
<input id="constX"></input><span>rstx</span>
<input id="constY"></input><span>rsty</span>
<br/>
<input id="const2X"></input><span>rst2x</span>
<input id="const2Y"></input><span>rst2y</span>
<br/>
<input id="bisX"></input><span>Bx</span>
<input id="bisY"></input><span>By</span>
<br/>
<input id="foldX"></input><span>fx</span>
<input id="foldY"></input><span>fy</span>
<br/>
<input id="deltaX"></input><span>dx</span>
<input id="deltaY"></input><span>dy</span>
<br/>
<input id="angle"></input><span>angle</span>

CSS

input{ width:3em; margin-right:3px;}
span{ display:inline-block;width:35px;}

div#myCanvas{
    position:relative;
    top:50px;
    left: 50px;
    outline: 2px solid black;
    background: #DDDDDD;
    z-index:0;
}

div.circle{
    position:absolute;
    background:white;
    border: 2px solid black;
    width: 20px;
    height:20px;
    border-radius:12px;
    text-align:center;
    font-size:10pt;
}

div.line{
    position:absolute;
    border: 1px solid black;
    width:0px;
}

div.circle.follower{

    color:black;
    z-index:2;
    opacity:1.0;
    z-index:-1;
}

.restrain{
    color:white;
    background:blue !important;
    opacity:1.0;
}

#page{
    background:#FFAAAA;
    opacity: 0.8;
    overflow-y:hidden;
 

}

#mask{
    overflow:hidden;
    background:transparent;
    opacity:1.0;

}

img{
    display:inline-block;
    float:left;
}

JavaScript

function distance(x1,x2,y1,y2){
    return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
}

document.body.style.cursor = 'none';
getEl =function(id){return document.getElementById(id);};
c = getEl("myCanvas");
cWidth=320;c.style.width=cWidth+"px";
cHeight=240;c.style.height=cHeight+"px";
circRadius = 10;

//===========================
var mouse;
spine = { x:cWidth/2,y:0};
sb = { x:spine.x,y:cHeight};
sm = { x:spine.x,y:cHeight/2};
st = { x:spine.x, y:0};
f = { x: 0, y: 0};
mc= { x: 0, y: 0};
active = false;
msRefresh = 10;
speed = 6; // 1-10
speed = speed < 1 ? 1 : speed > 10 ? 10 : speed;
//======draw some stuff============
//spine:
var spineLine = getEl("spine");
spineLine.style.height= cHeight+"px";
spineLine.style.left=spine.x+"px";
spineLine.style.top=spine.y+"px";
//spineBot:
var spineBot = getEl("spineBot");
spineBot.style.left = sb.x-circRadius+"px";
spineBot.style.top = sb.y-2*circRadius+"px";
var spineMid = getEl("spineMid");
spineMid.style.left = sm.x-circRadius+"px";
spineMid.style.top = sm.y-circRadius+"px";
var spineTop = getEl("spineTop");
spineTop.style.left = st.x-circRadius+"px";
spineTop.style.top = st.y+"px";


//===================================

mAbsPos = function(e) {
    //raw Mouse (mouse)
    var xLim = cWidth + c.offsetLeft,yLim = cHeight + c.offsetTop;
    var m = { x: e.pageX - c.offsetLeft, y: e.pageY - c.offsetTop};
   // m.x = m.x < 0 ? 0 : m.x; m.y = m.y < 0 ? 0 : m.y;
   // m.x = m.x > xLim ? xLim : m.x; m.y = m.y > yLim ? yLim : m.y;
    mouse = m;
    //debug
    getEl("mx").value=m.x;
    getEl("my").value=m.y;

};

drawTrail = function() {
    //============follower Logic {  
    active = true;
    dx = Math.round(mouse.x - f.x);
    dy = Math.round(mouse.y - f.y);
    if (dx !== 0 || dy !== 0) {
        f.x += dx * 0.1 * speed / 4;
        f.y += dy * 0.1 * speed / 4;
    }
    

    
    //} ===========follower Logic
    
    //=============Constrained1 logic{
    var botRadius = cWidth/2;
    var sb2f = { dx: f.x-spine.x,...