在画布上绘制一本书并为其制作动画答案

【问题标题】：drawing and animating a page of a book on a canvas在画布上绘制一本书并为其制作动画
【发布时间】：2014-01-26 23:13:09
【问题描述】：

我正在尝试在画布内创建一个 div。我想让 div 在这张照片中表现得像：http://i40.tinypic.com/10fxaxi.png。 div 应该从 step1 过渡到 step5，如图像上所述。

这就像一本书在这个角度、视图和透视上翻转。有人可以帮我吗？它应该只是 Html5、css3 和任何 JS pr Jquery。谢谢。

【问题讨论】：

turnjs.com 刚刚google了一下：p
我已经看过这个了。他们没有我正在寻找的视角或视角。 :(
在整个 turnjs shebang 上使用类似 'transform: perspective(1000px) rotateX(20deg)' 之类的东西...似乎可以解决问题 ;)

【解决方案1】：

您可以使用画布上下文的转换来进行页面翻转。

可以通过 context.scale(scaleX,scaleY) 进行缩放。

旋转可以通过 context.rotate(radianAngle) 来完成。

Skewing 没有专门的上下文命令，但可以使用 context.transform(1, skewY, skewX, 1, 0, 0);

您还需要设置所有缩放、旋转和倾斜操作的原点的 context.translate：context.translate(X,Y)。

试一试，如果您有任何问题，请返回您的代码。

祝你的项目好运！

【讨论】：