Flipping
Flippimg item on the X or the Y-axis allows adding more info without increasing the on load visible content.
Flip items have a backface which is hidden onload and is revealed on click/tap by rotating.
Flip Indicator
On computers and laptops the visitor can be given a clue by adding a partial hover rotate animation and using a different cursor.
Mobile users need an icon to let them know that action is required..
Setup
Since EverWeb is not able to activate animated items it needs some fancy CSS footwork to make the backface available in the correct orientation for editing on the design canvas. A check box is used to show/hide the backface in EverWeb.
With a responsive image on the front the backface height will vary with changes in browser/ viewing device window width.
Any overflow is revealed by scrolling on Y-axis and there is an option to remove the vertical scrollbar for a better quality viewing experience.
To indicate scrolling is required the backface heading has the option to add a chevron down icon.
Efficiency
Like the other ThemeKit UI widgets the flip items use external, minified stylesheets to reduce the quantity on internal styles.
The Javascript to create the flip action uses a single line of custom code to improve performance on mobile devices.