Flipbox

Front Flipbox

Back Flipbox

How it works

Flipbox is a nestable element with 2 additional nestable blocks: Front and Back.
You can place the elements you want at them. Visible content must be placed inside “Front” element. Content visible when flipping must be placed at “Back” element.
Front and Back elements styles can be edited right at Flipbox element or at their own style tabs.

Animation controls

Type: type will determine the flipbox direction. There are 4 types: horizontal, horizontal-reverse, vertical, vertical-reverse. The demo is horizontal-reverse.
Trigger: the event that will trigger the flipbox animation. Hover or click.
Perspective: determines the flip intensity.
Duration
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

-Tamu

On this page