CSS3中的页面卷曲（翻转）答案

【问题标题】：Page Curl(flipping) in CSS3CSS3中的页面卷曲（翻转）
【发布时间】：2012-02-05 07:13:15
【问题描述】：

我已经成功地在 JavaScript 中制作了页面卷曲，但它有点慢，我可以用纯 CSS 进行页面翻转吗？

这是一个小sn-p的代码

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

【问题讨论】：

标签： javascript html css page-curl

【解决方案1】：

这是 CSS3 翻页 http://romancortes.com/ficheros/page-flip.html

【讨论】：

非常感谢，但我想执行翻转（点击）事件并拖动页面打开它。