Enhanced Bootstrap Flip

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.

Hover this
Hello

This is a flip card back

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae facilisis

F

B

R

A

O

C

N

K

T

!

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.

Hover over the elements:

Flip horizontal
Back
Flip vertical
Back
<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>

Hover over the elements:

Flip horizontal
Back
Flip vertical
Back
<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>

Hover over the elements:

Flip horizontal
Back
Flip vertical
Back
<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>

Parent triggers

To rotate an element of a single or multiple child elements when {trigger} is performed on a parent element,
add data-fx-trigger="{inview|active|show|hover} to indicate that this is a parent element with the desired trigger - if this parent trigger is performed,
child elements will change.

Than add data-fx="{TRIGGER}:turn[{value}deg] attribute to child elements where {TRIGGER} is:

  • inview/T: - when .inview class is applied on parent Trigger element, because it’s visible in the viewport
  • active/T: - when .active class is applied on parent Trigger element
  • show/T: - when .show class is applied on parent Trigger element
  • hover/T: - when hover state is applied on parent Trigger element

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.

Hover over the wrapper:

Flip horizontal
Back
Flip vertical
Back
<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>

Click the wrapper to toggle .active class:

Flip horizontal
Back
Flip vertical
Back
<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>

Scroll into view to toggle .inview class on parent

Flip horizontal
Back
Flip vertical
Back
<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.

1
2
3
4

<!-- 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.

1
2
3
4

<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>