页面在CSS3中卷曲(翻转)
问题描述:
我已经成功地在JavaScript中制作页面卷曲,但其速度有点慢, 可以使页面在纯CSS中翻转吗?页面在CSS3中卷曲(翻转)
这是代码
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);
非常感谢,但我想执行的(上单击)事件翻转并拖动页面打开它。 – Reham 2012-02-05 07:28:59