Question

I’ve got a set of <canvas> elements that I am “flipping” around using flip!. My problem is that the way flip works it’s flipping the whole <canvas> element and that’s creating a not-so-pretty effect while it’s flipping… So what I am trying to accomplish is to “flip” in a similar way as flip! does, but within canvas. Or are there any other known workarounds?

Here’s a little example of what I’m trying to do: http://jsfiddle.net/hnqB6/4/.

I would like to flip the black triangles but when I use the flip method from the URL above it flips the whole canvas element which creates the not-so-nice effect.

I’m pretty sure you can just flip the whole image in canvas in a second but what I’m looking for is the whole animation too. Anyone had this problem before?

Answer 1

you could use CSS 3d Transforms and Transitions to perform a card flipping animation on the canvas element. flipping only a partial of the canvas element is only possible by programming the animation from scratch, since that would include manipulating the bitmap image pixel by pixel. Alternatively, you could transform the canvases matrix itself, but involves far more work then 3d Transition in relation to the Animation.