Add 3D flip effect to your components

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.

Install

Link to this version
ExperimentalReleased 14 February 2016Apache License 2.0
Framework Support
Vaadin 7.5+
Browser Compatibility
11
Install with
Release notes - Version 1.0.4
  • Change: Keep the flip state when changing mode
  • Fix: removed unused scss reference in manifest
  • Fix: #2 "Grid appears blurred"
  • Fix: #1 "is Java 7 supported ?"