About the Flip category

directory · May 12, 2025, 9:29am

Flip: With Flip you can make your Vaadin components two sided using horizontal 3D turn effect. Flip can be triggered by:

On hover
On mouse click
Programmatically: Flip.flip();

Just create two Vaadin components for each side. Here using images:

    Image front = new Image(...));
    Image back = new Image(...));
    Flip flip = new Flip(front,
                         back,
                         Flip.FlipMode.HOVER);
    layout.addComponent(flip);

Check code highlight in sidebar for a full sample and the live demo application to see how it behaves.

Note: CSS3 3D Transforms are used for the effect and that is tested only with MS Edge, Firefox 43, Chrome 47 and Safari 9.