drawing and animating a page of a book on a canvas

Question

I am trying create a div inside of a canvas. I'd like to have the div behaving like in this pic: http://i40.tinypic.com/10fxaxi.png . The div should transition from step1 to step5 like described on the image.

It's like having a page of a book fliping on this angle, view and perspective. can someone help me about it? it should be just Html5, css3 and any JS pr Jquery. Thanks.

Answer 1

You can do your page flip with canvas context's transforms.

The scaling can be done with context.scale(scaleX,scaleY).

The rotation can be done with context.rotate(radianAngle).

Skewing does not have a dedicated context command but can be done with context.transform(1, skewY, skewX, 1, 0, 0);

You will also need context.translate which sets the origin point of all scaling, rotating and skewing operations: context.translate(X,Y).

Give this a try and come back with your code if you have questions.

Good luck with your project!