Effects
Built in
Variants
Rotate
Overview
Easily rotate elements in 3D space using rotate.to()
or rotate.from()
syntax.
Triggers
Rotate
To rotate the element when <trigger>
is performed on a single element, use data-tor-fx="<trigger>:rotate<direction>.to(<value>)
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
The <direction>
is one of:
rotate.to
- default rotate over z-axis
rotateX.to
- rotate over x-axis
rotateY.to
- rotate over y-axis
And the <value>
can be any custom CSS rotation value. Example rotate.to(35deg)
z-axis (default)
< div data-tor = " hover:rotate.to(10deg)" > rotate.to(10deg)</ div>
< div data-tor = " hover:rotate.to(45deg)" > rotate.to(45deg)</ div>
< div data-tor = " hover:rotate.to(90deg)" > rotate.to(90deg)</ div>
< div data-tor = " hover:rotate.to(180deg)" > rotate.to(180deg)</ div>
< div data-tor = " hover:rotate.to(360deg)" > rotate.to(360deg)</ div>
< div data-tor = " active:rotate.to(10deg)" > rotate.to(10deg)</ div>
< div data-tor = " active:rotate.to(45deg)" > rotate.to(45deg)</ div>
< div data-tor = " active:rotate.to(90deg)" > rotate.to(90deg)</ div>
< div data-tor = " active:rotate.to(180deg)" > rotate.to(180deg)</ div>
< div data-tor = " active:rotate.to(360deg)" > rotate.to(360deg)</ div>
< div data-tor = " inview:rotate.to(10deg)" > rotate.to(10deg)</ div>
< div data-tor = " inview:rotate.to(45deg)" > rotate.to(45deg)</ div>
< div data-tor = " inview:rotate.to(90deg)" > rotate.to(90deg)</ div>
< div data-tor = " inview:rotate.to(180deg)" > rotate.to(180deg)</ div>
< div data-tor = " inview:rotate.to(360deg)" > rotate.to(360deg)</ div>
x-axis
< div data-tor = " hover:rotateX.to(10deg)" > rotateX.to(10deg)</ div>
< div data-tor = " hover:rotateX.to(45deg)" > rotateX.to(45deg)</ div>
< div data-tor = " hover:rotateX.to(90deg)" > rotateX.to(90deg)</ div>
< div data-tor = " hover:rotateX.to(180deg)" > rotateX.to(180deg)</ div>
< div data-tor = " hover:rotateX.to(360deg)" > rotateX.to(360deg)</ div>
< div data-tor = " active:rotateX.to(10deg)" > rotateX.to(10deg)</ div>
< div data-tor = " active:rotateX.to(45deg)" > rotateX.to(45deg)</ div>
< div data-tor = " active:rotateX.to(90deg)" > rotateX.to(90deg)</ div>
< div data-tor = " active:rotateX.to(180deg)" > rotateX.to(180deg)</ div>
< div data-tor = " active:rotateX.to(360deg)" > rotateX.to(360deg)</ div>
< div data-tor = " inview:rotateX.to(10deg)" > rotateX.to(10deg)</ div>
< div data-tor = " inview:rotateX.to(45deg)" > rotateX.to(45deg)</ div>
< div data-tor = " inview:rotateX.to(90deg)" > rotateX.to(90deg)</ div>
< div data-tor = " inview:rotateX.to(180deg)" > rotateX.to(180deg)</ div>
< div data-tor = " inview:rotateX.to(360deg)" > rotateX.to(360deg)</ div>
y-axis
< div data-tor = " hover:rotateY.to(10deg)" > rotateY.to(10deg)</ div>
< div data-tor = " hover:rotateY.to(45deg)" > rotateY.to(45deg)</ div>
< div data-tor = " hover:rotateY.to(90deg)" > rotateY.to(90deg)</ div>
< div data-tor = " hover:rotateY.to(180deg)" > rotateY.to(180deg)</ div>
< div data-tor = " hover:rotateY.to(360deg)" > rotateY.to(360deg)</ div>
< div data-tor = " active:rotateY.to(10deg)" > rotateY.to(10deg)</ div>
< div data-tor = " active:rotateY.to(45deg)" > rotateY.to(45deg)</ div>
< div data-tor = " active:rotateY.to(90deg)" > rotateY.to(90deg)</ div>
< div data-tor = " active:rotateY.to(180deg)" > rotateY.to(180deg)</ div>
< div data-tor = " active:rotateY.to(360deg)" > rotateY.to(360deg)</ div>
< div data-tor = " inview:rotateY.to(10deg)" > rotateY.to(10deg)</ div>
< div data-tor = " inview:rotateY.to(45deg)" > rotateY.to(45deg)</ div>
< div data-tor = " inview:rotateY.to(90deg)" > rotateY.to(90deg)</ div>
< div data-tor = " inview:rotateY.to(180deg)" > rotateY.to(180deg)</ div>
< div data-tor = " inview:rotateY.to(360deg)" > rotateY.to(360deg)</ div>
Rotate from
To rotate the element back to its original position when <trigger>
is performed on a single element, use data-tor-fx="<trigger>:rotate<direction>.from(<value>)
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
The <direction>
is one of:
rotate.from
- default rotate over z-axis
rotateX.from
- rotate over x-axis
rotateY.from
- rotate over y-axis
And the <value>
can be any custom CSS rotation value. Example rotate.from(35deg)
z-axis (default)
< div data-tor = " hover:rotate.from(10deg)" > rotate.from(10deg)</ div>
< div data-tor = " hover:rotate.from(45deg)" > rotate.from(45deg)</ div>
< div data-tor = " hover:rotate.from(90deg)" > rotate.from(90deg)</ div>
< div data-tor = " hover:rotate.from(180deg)" > rotate.from(180deg)</ div>
< div data-tor = " hover:rotate.from(360deg)" > rotate.from(360deg)</ div>
< div data-tor = " active:rotate.from(10deg)" > rotate.from(10deg)</ div>
< div data-tor = " active:rotate.from(45deg)" > rotate.from(45deg)</ div>
< div data-tor = " active:rotate.from(90deg)" > rotate.from(90deg)</ div>
< div data-tor = " active:rotate.from(180deg)" > rotate.from(180deg)</ div>
< div data-tor = " active:rotate.from(360deg)" > rotate.from(360deg)</ div>
< div data-tor = " inview:rotate.from(10deg)" > rotate.from(10deg)</ div>
< div data-tor = " inview:rotate.from(45deg)" > rotate.from(45deg)</ div>
< div data-tor = " inview:rotate.from(90deg)" > rotate.from(90deg)</ div>
< div data-tor = " inview:rotate.from(180deg)" > rotate.from(180deg)</ div>
< div data-tor = " inview:rotate.from(360deg)" > rotate.from(360deg)</ div>
x-axis
< div data-tor = " hover:rotateX.from(10deg)" > rotateX.from(10deg)</ div>
< div data-tor = " hover:rotateX.from(45deg)" > rotateX.from(45deg)</ div>
< div data-tor = " hover:rotateX.from(90deg)" > rotateX.from(90deg)</ div>
< div data-tor = " hover:rotateX.from(180deg)" > rotateX.from(180deg)</ div>
< div data-tor = " hover:rotateX.from(360deg)" > rotateX.from(360deg)</ div>
< div data-tor = " active:rotateX.from(10deg)" > rotateX.from(10deg)</ div>
< div data-tor = " active:rotateX.from(45deg)" > rotateX.from(45deg)</ div>
< div data-tor = " active:rotateX.from(90deg)" > rotateX.from(90deg)</ div>
< div data-tor = " active:rotateX.from(180deg)" > rotateX.from(180deg)</ div>
< div data-tor = " active:rotateX.from(360deg)" > rotateX.from(360deg)</ div>
< div data-tor = " inview:rotateX.from(10deg)" > rotateX.from(10deg)</ div>
< div data-tor = " inview:rotateX.from(45deg)" > rotateX.from(45deg)</ div>
< div data-tor = " inview:rotateX.from(90deg)" > rotateX.from(90deg)</ div>
< div data-tor = " inview:rotateX.from(180deg)" > rotateX.from(180deg)</ div>
< div data-tor = " inview:rotateX.from(360deg)" > rotateX.from(360deg)</ div>
y-axis
< div data-tor = " hover:rotateY.from(10deg)" > rotateY.from(10deg)</ div>
< div data-tor = " hover:rotateY.from(45deg)" > rotateY.from(45deg)</ div>
< div data-tor = " hover:rotateY.from(90deg)" > rotateY.from(90deg)</ div>
< div data-tor = " hover:rotateY.from(180deg)" > rotateY.from(180deg)</ div>
< div data-tor = " hover:rotateY.from(360deg)" > rotateY.from(360deg)</ div>
< div data-tor = " active:rotateY.from(10deg)" > rotateY.from(10deg)</ div>
< div data-tor = " active:rotateY.from(45deg)" > rotateY.from(45deg)</ div>
< div data-tor = " active:rotateY.from(90deg)" > rotateY.from(90deg)</ div>
< div data-tor = " active:rotateY.from(180deg)" > rotateY.from(180deg)</ div>
< div data-tor = " active:rotateY.from(360deg)" > rotateY.from(360deg)</ div>
< div data-tor = " inview:rotateY.from(10deg)" > rotateY.from(10deg)</ div>
< div data-tor = " inview:rotateY.from(45deg)" > rotateY.from(45deg)</ div>
< div data-tor = " inview:rotateY.from(90deg)" > rotateY.from(90deg)</ div>
< div data-tor = " inview:rotateY.from(180deg)" > rotateY.from(180deg)</ div>
< div data-tor = " inview:rotateY.from(360deg)" > rotateY.from(360deg)</ div>
Parent triggers
Rotate
To rotate the element of a single or multiple child elements when <trigger>
is performed on a parent element, add data-tor-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 be affected (will change)
Than add data-tor-fx="<trigger>:rotate<direction>.to(<value>)
attribute to child elements where <trigger>
is:
inview(p):
- when .inview
class is applied on P arent trigger element, because it's visible in the viewport
active(p):
- when .active
class is applied on P arent trigger element
show(p):
- when .show
class is applied on P arent trigger element
hover(p):
- when hover
state is applied on P arent trigger element
The <direction>
is one of:
rotate.to
- default rotate over z-axis
rotateX.to
- rotate over x-axis
rotateY.to
- rotate over y-axis
And the <value>
can be any custom CSS rotation value. Example rotate.to(35deg)
z-axis (default)
< div data-tor = " hover(p):rotate.to(10deg)" > rotate.to(10deg)</ div>
< div data-tor = " hover(p):rotate.to(45deg)" > rotate.to(45deg)</ div>
< div data-tor = " hover(p):rotate.to(90deg)" > rotate.to(90deg)</ div>
< div data-tor = " hover(p):rotate.to(180deg)" > rotate.to(180deg)</ div>
< div data-tor = " hover(p):rotate.to(360deg)" > rotate.to(360deg)</ div>
< div data-tor = " active(p):rotate.to(10deg)" > rotate.to(10deg)</ div>
< div data-tor = " active(p):rotate.to(45deg)" > rotate.to(45deg)</ div>
< div data-tor = " active(p):rotate.to(90deg)" > rotate.to(90deg)</ div>
< div data-tor = " active(p):rotate.to(180deg)" > rotate.to(180deg)</ div>
< div data-tor = " active(p):rotate.to(360deg)" > rotate.to(360deg)</ div>
< div data-tor = " inview(p):rotate.to(10deg)" > rotate.to(10deg)</ div>
< div data-tor = " inview(p):rotate.to(45deg)" > rotate.to(45deg)</ div>
< div data-tor = " inview(p):rotate.to(90deg)" > rotate.to(90deg)</ div>
< div data-tor = " inview(p):rotate.to(180deg)" > rotate.to(180deg)</ div>
< div data-tor = " inview(p):rotate.to(360deg)" > rotate.to(360deg)</ div>
x-axis
< div data-tor = " hover(p):rotateX.to(10deg)" > rotateX.to(10deg)</ div>
< div data-tor = " hover(p):rotateX.to(45deg)" > rotateX.to(45deg)</ div>
< div data-tor = " hover(p):rotateX.to(90deg)" > rotateX.to(90deg)</ div>
< div data-tor = " hover(p):rotateX.to(180deg)" > rotateX.to(180deg)</ div>
< div data-tor = " hover(p):rotateX.to(360deg)" > rotateX.to(360deg)</ div>
< div data-tor = " active(p):rotateX.to(10deg)" > rotateX.to(10deg)</ div>
< div data-tor = " active(p):rotateX.to(45deg)" > rotateX.to(45deg)</ div>
< div data-tor = " active(p):rotateX.to(90deg)" > rotateX.to(90deg)</ div>
< div data-tor = " active(p):rotateX.to(180deg)" > rotateX.to(180deg)</ div>
< div data-tor = " active(p):rotateX.to(360deg)" > rotateX.to(360deg)</ div>
< div data-tor = " inview(p):rotateX.to(10deg)" > rotateX.to(10deg)</ div>
< div data-tor = " inview(p):rotateX.to(45deg)" > rotateX.to(45deg)</ div>
< div data-tor = " inview(p):rotateX.to(90deg)" > rotateX.to(90deg)</ div>
< div data-tor = " inview(p):rotateX.to(180deg)" > rotateX.to(180deg)</ div>
< div data-tor = " inview(p):rotateX.to(360deg)" > rotateX.to(360deg)</ div>
y-axis
< div data-tor = " hover(p):rotateY.to(10deg)" > rotateY.to(10deg)</ div>
< div data-tor = " hover(p):rotateY.to(45deg)" > rotateY.to(45deg)</ div>
< div data-tor = " hover(p):rotateY.to(90deg)" > rotateY.to(90deg)</ div>
< div data-tor = " hover(p):rotateY.to(180deg)" > rotateY.to(180deg)</ div>
< div data-tor = " hover(p):rotateY.to(360deg)" > rotateY.to(360deg)</ div>
< div data-tor = " active(p):rotateY.to(10deg)" > rotateY.to(10deg)</ div>
< div data-tor = " active(p):rotateY.to(45deg)" > rotateY.to(45deg)</ div>
< div data-tor = " active(p):rotateY.to(90deg)" > rotateY.to(90deg)</ div>
< div data-tor = " active(p):rotateY.to(180deg)" > rotateY.to(180deg)</ div>
< div data-tor = " active(p):rotateY.to(360deg)" > rotateY.to(360deg)</ div>
< div data-tor = " inview(p):rotateY.to(10deg)" > rotateY.to(10deg)</ div>
< div data-tor = " inview(p):rotateY.to(45deg)" > rotateY.to(45deg)</ div>
< div data-tor = " inview(p):rotateY.to(90deg)" > rotateY.to(90deg)</ div>
< div data-tor = " inview(p):rotateY.to(180deg)" > rotateY.to(180deg)</ div>
< div data-tor = " inview(p):rotateY.to(360deg)" > rotateY.to(360deg)</ div>
Rotate from
To rotate the element back to its original position of a single or multiple child elements when <trigger>
is performed on a parent element, add data-tor-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 be affected (will change)
Than add data-tor-fx="<trigger>:rotate.from(<value>)
attribute to child elements where <trigger>
is:
inview(p):
- when .inview
class is applied on P arent trigger element, because it's visible in the viewport
active(p):
- when .active
class is applied on P arent trigger element
show(p):
- when .show
class is applied on P arent trigger element
hover(p):
- when hover
state is applied on P arent trigger element
The <direction>
is one of:
rotate.from
- default rotate over z-axis
rotateX.from
- rotate over x-axis
rotateY.from
- rotate over y-axis
And the <value>
can be any custom CSS rotation value. Example rotate.from(35deg)
z-axis (default)
< div data-tor = " hover(p):rotate.from(10deg)" > rotate.from(10deg)</ div>
< div data-tor = " hover(p):rotate.from(45deg)" > rotate.from(45deg)</ div>
< div data-tor = " hover(p):rotate.from(90deg)" > rotate.from(90deg)</ div>
< div data-tor = " hover(p):rotate.from(180deg)" > rotate.from(180deg)</ div>
< div data-tor = " hover(p):rotate.from(360deg)" > rotate.from(360deg)</ div>
< div data-tor = " active(p):rotate.from(10deg)" > rotate.from(10deg)</ div>
< div data-tor = " active(p):rotate.from(45deg)" > rotate.from(45deg)</ div>
< div data-tor = " active(p):rotate.from(90deg)" > rotate.from(90deg)</ div>
< div data-tor = " active(p):rotate.from(180deg)" > rotate.from(180deg)</ div>
< div data-tor = " active(p):rotate.from(360deg)" > rotate.from(360deg)</ div>
< div data-tor = " inview(p):rotate.from(10deg)" > rotate.from(10deg)</ div>
< div data-tor = " inview(p):rotate.from(45deg)" > rotate.from(45deg)</ div>
< div data-tor = " inview(p):rotate.from(90deg)" > rotate.from(90deg)</ div>
< div data-tor = " inview(p):rotate.from(180deg)" > rotate.from(180deg)</ div>
< div data-tor = " inview(p):rotate.from(360deg)" > rotate.from(360deg)</ div>
x-axis
< div data-tor = " hover(p):rotateX.from(10deg)" > rotateX.from(10deg)</ div>
< div data-tor = " hover(p):rotateX.from(45deg)" > rotateX.from(45deg)</ div>
< div data-tor = " hover(p):rotateX.from(90deg)" > rotateX.from(90deg)</ div>
< div data-tor = " hover(p):rotateX.from(180deg)" > rotateX.from(180deg)</ div>
< div data-tor = " hover(p):rotateX.from(360deg)" > rotateX.from(360deg)</ div>
< div data-tor = " active(p):rotateX.from(10deg)" > rotateX.from(10deg)</ div>
< div data-tor = " active(p):rotateX.from(45deg)" > rotateX.from(45deg)</ div>
< div data-tor = " active(p):rotateX.from(90deg)" > rotateX.from(90deg)</ div>
< div data-tor = " active(p):rotateX.from(180deg)" > rotateX.from(180deg)</ div>
< div data-tor = " active(p):rotateX.from(360deg)" > rotateX.from(360deg)</ div>
< div data-tor = " inview(p):rotateX.from(10deg)" > rotateX.from(10deg)</ div>
< div data-tor = " inview(p):rotateX.from(45deg)" > rotateX.from(45deg)</ div>
< div data-tor = " inview(p):rotateX.from(90deg)" > rotateX.from(90deg)</ div>
< div data-tor = " inview(p):rotateX.from(180deg)" > rotateX.from(180deg)</ div>
< div data-tor = " inview(p):rotateX.from(360deg)" > rotateX.from(360deg)</ div>
y-axis
< div data-tor = " hover(p):rotateY.from(10deg)" > rotateY.from(10deg)</ div>
< div data-tor = " hover(p):rotateY.from(45deg)" > rotateY.from(45deg)</ div>
< div data-tor = " hover(p):rotateY.from(90deg)" > rotateY.from(90deg)</ div>
< div data-tor = " hover(p):rotateY.from(180deg)" > rotateY.from(180deg)</ div>
< div data-tor = " hover(p):rotateY.from(360deg)" > rotateY.from(360deg)</ div>
< div data-tor = " active(p):rotateY.from(10deg)" > rotateY.from(10deg)</ div>
< div data-tor = " active(p):rotateY.from(45deg)" > rotateY.from(45deg)</ div>
< div data-tor = " active(p):rotateY.from(90deg)" > rotateY.from(90deg)</ div>
< div data-tor = " active(p):rotateY.from(180deg)" > rotateY.from(180deg)</ div>
< div data-tor = " active(p):rotateY.from(360deg)" > rotateY.from(360deg)</ div>
< div data-tor = " inview(p):rotateY.from(10deg)" > rotateY.from(10deg)</ div>
< div data-tor = " inview(p):rotateY.from(45deg)" > rotateY.from(45deg)</ div>
< div data-tor = " inview(p):rotateY.from(90deg)" > rotateY.from(90deg)</ div>
< div data-tor = " inview(p):rotateY.from(180deg)" > rotateY.from(180deg)</ div>
< div data-tor = " inview(p):rotateY.from(360deg)" > rotateY.from(360deg)</ div>
Flip effect
Making a Bootstrap flip card effect with Torus Kit is really easy. Just add .tor-flip
class to the parent wrapper and add it the data-tor="hover:rotateY.to(180deg)"
attribute. Then make two child elements with the .tor-flip-front
class for the first one, and .tor-flip-back
class for the second. Finally add desired content inside these elements.
Here is the starter template for the flip card:
< div class = " tor-flip" data-tor = " hover:rotateY.to(180deg)" >
< div class = " tor-flip-front" >
...
</ div>
< div class = " tor-flip-back" >
...
</ div>
</ div>