在畫布上繪制書頁並將其動畫化

Question

我正在嘗試在畫布中創建一個div。 我想讓div表現為這張圖片： http : //i40.tinypic.com/10fxaxi.png 。 div應該從步驟1過渡到步驟5，如圖片中所述。

就像有一本書的頁面在這個角度，視圖和視角上翻轉一樣。 有人可以幫我嗎？ 它應該只是Html5，css3和任何JS pr Jquery。 謝謝。

Answer 1

您可以使用畫布上下文的轉換來進行頁面翻轉。

縮放可以使用context.scale（scaleX，scaleY）完成。

可以使用context.rotate（radianAngle）進行旋轉。

傾斜沒有專用的上下文命令，但可以使用context.transform（1，skewY，skewX，1，0，0）;來完成。

您還將需要context.translate，它設置所有縮放，旋轉和傾斜操作的原點：context.translate（X，Y）。

嘗試一下，如果有疑問，請返回您的代碼。

祝您項目順利！