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
classactive:
- when element gets.active
classshow:
- when element gets.show
classhover:
- when element getshover
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.
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>