title: Page Curl(flipping) in CSS3
body: <p>I already succeeded in making a page curl in JavaScript but its a little slow,
  can i make page flipping in pure CSS?</p>
  
  <p>This is a small snippet of the code</p>
  
  <pre><code>    function drawFlip( flip ) {
      // Strength of the fold is strongest in the middle of the book
      var strength = 1 - Math.abs( flip.progress );
  
      // Width of the folded paper
      var foldWidth = ( PAGE_WIDTH * 0.165 ) * ( 1 - flip.progress/0.5 );
  
      // X position of the folded paper
      var foldX = PAGE_WIDTH * flip.progress + foldWidth;
  
      // How far the page should outdent vertically due to perspective
      var verticalOutdent = 20 * strength;
  
      // The maximum width of the left and right side shadows
      var paperShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( 1 - flip.progress, 0.5 ), 0 );
      var rightShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( strength, 0.5 ), 0 );
      var leftShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( strength, 0.5 ), 0 );
  </code></pre>