頁面在CSS3中捲曲（翻轉）

Question

我已經成功地在JavaScript中製作頁面捲曲，但其速度有點慢， 可以使頁面在純CSS中翻轉嗎？

這是代碼

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); 

Answer 1

的一個小片斷這是CSS3翻頁http://romancortes.com/ficheros/page-flip.html