Built in Flip PRO

Create a flip animation effect in horizontal and vertical direction

Overview

Flip the element in horizontal or vertical direction to reveal it’s back side content. Use the :flip--h for horizontal and :flip--v for vertical alignment. In order to create a flip element with
two sided content, create .flip-front and .flip-back elements as a direct child and place the content inside them.

Examples

Examples of horizontal and vertical flip effect with Torus Kit.

Triggers

To rotate an element when {trigger} is performed on a single element, use data-fx="{trigger}:turn[{value}deg] where {trigger} is:

• inview: - when element appears in the viewport and gets .inview class
• active: - when element gets .active class
• show: - when element gets .show class
• hover: - when element gets hover state

And {value} is any integer with deg unit. The 45deg, 90deg and 180deg values are predefined in CSS, so they are immediately available on page load, thus not processed by JavaScript.

<div data-fx="hover:flip--h">
  <div class="flip-front">Flip horizontal</div>
  <div class="flip-back">Back</div>
</div>

<div data-fx="hover:flip--v">
  <div class="flip-front">Flip vertical</div>
  <div class="flip-back">Back</div>
</div>

<div data-fx="active:flip--h">
  <div class="flip-front">Flip horizontal</div>
  <div class="flip-back">Back</div>
</div>

<div data-fx="active:flip--v">
  <div class="flip-front">Flip vertical</div>
  <div class="flip-back">Back</div>
</div>

<div data-fx="inview:flip--h">
  <div class="flip-front">Flip horizontal</div>
  <div class="flip-back">Back</div>
</div>

<div data-fx="inview:flip--v">
  <div class="flip-front">Flip vertical</div>
  <div class="flip-back">Back</div>
</div>

<div data-fx-trigger="hover">
  <div data-fx="hover/T:flip--h">
    <div class="flip-front">Flip horizontal</div>
    <div class="flip-back">Back</div>
  </div>

  <div data-fx="hover/T:flip--v">
    <div class="flip-front">Flip vertical</div>
    <div class="flip-back">Back</div>
  </div>
</div>

<div data-fx-trigger="active">
  <div data-fx="active/T:flip--h">
    <div class="flip-front">Flip horizontal</div>
    <div class="flip-back">Back</div>
  </div>

  <div data-fx="active/T:flip--v">
    <div class="flip-front">Flip vertical</div>
    <div class="flip-back">Back</div>
  </div>
</div>

<div data-fx-trigger="inview">
  <div data-fx="inview/T:flip--h">
    <div class="flip-front">Flip horizontal</div>
    <div class="flip-back">Back</div>
  </div>

  <div data-fx="inview/T:flip--v">
    <div class="flip-front">Flip vertical</div>
    <div class="flip-back">Back</div>
  </div>
</div>

Modifications

Perspective

There is a default self perspective of 1000px for every flip--* element. The “self” means, that the perspective is applied only to element itself and doesn’t consider a parent viewport dimensions.
If you create a couple of same flip elements, you can see that they have a perspective, however, it acts equally on every single element. To apply a global perspective to multiple elements
add a .perspective class to a parent element.

Self

You can change the self perspective by adding perspective[{value}px] to the data-fx attribute with the flip--* effect.

<!-- Default perspective -->
<div class="d-inline-block" data-fx="hover:flip--v">
  <div class="p-6 border">1</div>
</div>

<!-- Default perspective -->
<div class="d-inline-block" data-fx="hover:flip--v">
  <div class="p-6 border">2</div>
</div>

<!-- Default perspective -->
<div class="d-inline-block" data-fx="hover:flip--v">
  <div class="p-6 border">3</div>
</div>

<!-- Custom perspective -->
<div class="d-inline-block ml-3" data-fx="hover:flip--v perspective[100px]">
  <div class="p-6 border border-dark">4</div>
</div>

Global

Add a .perspective to the parent element to set a global 1000px perspective, that affects all child elements.

<div class="perspective d-inline-block" data-fx-trigger="hover">
  <div class="d-inline-block" data-fx="hover/T:flip--v">
    <div class="p-6 border">1</div>
  </div>
  <div class="d-inline-block" data-fx="hover/T:flip--v">
    <div class="p-6 border">2</div>
  </div>
  <div class="d-inline-block" data-fx="hover/T:flip--v">
    <div class="p-6 border">3</div>
  </div>
  <div class="d-inline-block" data-fx="hover/T:flip--v">
    <div class="p-6 border">4</div>
  </div>
</div>