html5菜单折纸效果

 

类似猎豹浏览器安装时的用户须知效果。 效果不是那么好，有那个意思，接缝比较大。 <! DOCTYPE html > < html >   < head >    < meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8" >    < title >fold paper effect by gt </ title >    < style > #wrapper  {  -webkit-perspective :  55cm ;  -webkit-perspective-origin :  50% 50% ;  text-align :  center ; } .paper  {  position :  relative ;  height :  40px ;  width :  5em ;  margin :  0 ;  background-color :  aqua ;  -webkit-transition :  -webkit-transform 1s linear ; } </ style >    < script  type ="text/javascript" >  window.angel  =   0 ;  window.timer;   function  fold() {    var  foldUp  =  document.getElementById( " foldUp " );    var  foldDown  =  document.getElementById( " foldDown " );    var  down  =  document.getElementById( " down " );    if  (window.angel  ==   0 ) {    window.timer  =  setInterval( function () {      var  diff  =  different( - 1 ,  20 );     console.log(foldUp.offsetTop)     move(foldUp, diff,  1 );     move(foldDown, diff,  3 );     move(down, diff,  4 );    },  40 );    setTimeout( function () {     clearInterval(window.timer);     foldUp.style.top  =   " -20px " ;     foldDown.style.top  =   " -60px " ;     down.style.top  =   " -80px " ;     window.angel  =   - 90 ;    },  1030 );    foldUp.style.webkitTransform  =   " rotateX(-90deg) " ;    foldDown.style.webkitTransform  =   " rotateX(90deg) " ;   }  else   if  (angel  ==   - 90 ) {    window.timer  =  setInterval( function () {      var  diff  =  different( 1 ,  20 );     console.log(foldUp.offsetTop)     move(foldUp, diff,  1 );     move(foldDown, diff,  3 );     move(down, diff,  4 );    },  40 );    setTimeout( function () {     clearInterval(window.timer);     foldUp.style.top  =   " 0 " ;     foldDown.style.top  =   " 0 " ;     down.style.top  =   " 0 " ;     window.angel  =   0 ;    },  1030 );    foldUp.style.webkitTransform  =   " rotateX(0deg) " ;    foldDown.style.webkitTransform  =   " rotateX(0deg) " ;   }  else  {    console.log(window.angel)   }  }   function  positionValue(div, type) { //  得到css带单位的值    var  str  =  div.style[type];   str  =  str.substring( 0 , str.length  -   2 );    var  value  =  parseInt(str);    if  (isNaN(value)) {    value  =   0 ;   }    return  value;  }   function  move(div, different, time) {    var  top  =  positionValue(div,  " top " );   div.style.top  =  top  +  different  *  time  +   " px " ;  }   function  different(direction, height) {    var  lastAngel  =  window.angel;   window.angel  +=   3.6   *  direction;    var  different  =  Math     .ceil((Math.cos(window.angel  /   180   *  Math.PI)  -  Math       .cos(lastAngel  /   180   *  Math.PI))        *  height  *   100 )  /   100 ;    return  different;  } </ script >   </ head >   < body >    < div  id ="wrapper" >     < div  id ="up"  class ="paper" >     g     </ div >     < div  id ="foldUp"  class ="paper" >     n     </ div >     < div  id ="foldDown"  class ="paper" >     b     </ div >     < div  id ="down"  class ="paper" >     t     </ div >    </ div >    < button  onclick =fold(); >    fold    </ button >   </ body > </ html >