Pro

Flip

Rotate an element along x or y axis - flip horizontal or vertical

Overview

Use flip-h (horizontal flip) and flip-v (vertical flip) values in data-fx data attribute to flip (rotate by 180deg along x or y axis) the element.

How to use

Use data-fx="{action}:flip-{direction}" data attribute to rotate the element in clock wise direction.

Where {action} is one of:

  • h: to animate an element when it’s hovered
  • a: to animate an element when it gets .active class
  • th: to animate an element when the parent trigger is hovered
  • ta: to animate an element when the parent trigger gets .active or .show class

… and {direction} is one of:

  • h - horizontal flip - element rotates around y axis
  • v - vertical flip - element rotates around x axis

Front and back side

The main purpose of the flip effect is to reveal a hidden back side on particular {action}. So it is necessary to distinguish each side with .flip-front and .flip-back classes. A .flip-back automatically gets a position: absolute and is hidden behind.

Structure of flip-{direction}:

<div data-fx="{action}:flip-{direction}">
  <div class="flip-front">
    Front content...
  </div>
  <div class="flip-back">
    Back content...
  </div>
</div>

Perspective

To add some perspective (depth) to flat flip effect, wrap the data-fx with flip effect into element with .perspective class.

Front side
Back side
<div class="perspective">
  <div data-fx="h:flip-h">
    <div class="flip-front">Front side</div>
    <div class="flip-back">Back side</div>
  </div>
</div>

Flip horizontal

On hover

To flip a single element in horizontal direction on its hover, add data-fx="h:flip-h" data attribute.

Front side
Back side
<div data-fx="h:flip-h">
  <div class="flip-front">Front side</div>
  <div class="flip-back">Back side</div>
</div>

On active

To flip a single element in horizontal direction when it gets .active class, add data-fx="a:flip-h" data attribute.

Click the elements to toggle its .active class
Front side
Back side
<div data-fx="a:flip-h">a:flip-h</div>

On trigger hover

Flip a single or multiple elements in horizontal direction when the parent trigger is hovered. At first, indicate what is parent trigger element by adding data-trigger="hover" attribute to it, then add data-fx="th:flip-h" data attribute to elements you want to flip when trigger is hovered.

Hover this trigger
Front side
Back side
<div data-trigger="hover">
  <div data-fx="th:flip-h">
    <div class="flip-front">Front side</div>
    <div class="flip-back">Back side</div>
  </div>
</div>

On trigger active

Flip a single or multiple elements in horizontal direction when the parent trigger gets .active or .show class. At first, indicate what is parent trigger element by adding data-trigger="{active|show}" attribute to it, then add data-fx="ta:flip-h-{direction}" data attribute to elements you want to flip when trigger is hovered.

Click this trigger to toggle its .active class
Front side
Back side
<div data-trigger="active">
  <div data-fx="ta:flip-h">
    <div class="flip-front">Front side</div>
    <div class="flip-back">Back side</div>
  </div>
</div>

Flip vertical

On hover

To flip a single element in vertical direction on its hover, add data-fx="h:flip-v" data attribute.

Front side
Back side
<div data-fx="h:flip-v">
  <div class="flip-front">Front side</div>
  <div class="flip-back">Back side</div>
</div>

On active

To flip a single element in counter clock wise direction when it gets .active class, add data-fx="a:flip-v" data attribute.

Click the elements to toggle its .active class
Front side
Back side
<div data-fx="a:flip-v">
  <div class="flip-front">Front side</div>
  <div class="flip-back">Back side</div>
</div>

On trigger hover

Flip a single or multiple elements in vertical direction when the parent trigger is hovered. At first, indicate what is parent trigger element by adding data-trigger="hover" attribute to it, then add data-fx="th:flip-v" data attribute to elements you want to flip when trigger is hovered.

Hover this trigger
Front side
Back side
<div data-trigger="hover">
  <div data-fx="th:flip-v">
    <div class="flip-front">Front side</div>
    <div class="flip-back">Back side</div>
  </div>
</div>

On trigger active

Flip a single or multiple elements in vertical direction when the parent trigger gets .active or .show class. At first, indicate what is parent trigger element by adding data-trigger="{active|show}" attribute to it, then add data-fx="ta:flip-v" data attribute to elements you want to flip when trigger is hovered.

Click this trigger to toggle its .active class
Front side
Back side
<div data-trigger="active">
  <div data-fx="ta:flip-v">
    <div class="flip-front">Front side</div>
    <div class="flip-back">Back side</div>
  </div>
</div>