Flipping a gui Component in the x-z plane

Question

I would like to know the respective graphics transformations ..in creating a flipping effect of a ui component about the x-z plane. It needs to be done only using 2d since the swing toolkit only supports 2d affine transformations.

http://www.verysimple.com/flex/flipcard/ .... is an example of the effect to be achieved .

Answer 1

Not a true 3-D flipping but the effect looks very similar if you just do 2-D scaling like this,

1. Render the front image.
2. Scale X from 1 to 0, anchored at the middle.
3. Render the back image.
4. Scale X from 0 to 1, anchored at the middle.

To simulate a constant angular speed, the scaling factor can be calculated like this,

double scale = Math.cos(i*Math.PI/(2.0*steps));

The i is step number and steps is the total number of steps need to simulate a 90 degree rotation.

You can also introduce some shear transformation to simulate the perspective of a true 3-D rotation but the effect is not that noticeable for a fast flipping.