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
classactive:
- when element gets .active
classshow:
- when element gets .show
classhover:
- when element gets :hover
stateThe <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
classactive:
- when element gets .active
classshow:
- when element gets .show
classhover:
- when element gets :hover
stateThe <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 viewportactive(p):
- when .active
class is applied on P arent trigger elementshow(p):
- when .show
class is applied on P arent trigger elementhover(p):
- when hover
state is applied on P arent trigger elementThe <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 viewportactive(p):
- when .active
class is applied on P arent trigger elementshow(p):
- when .show
class is applied on P arent trigger elementhover(p):
- when hover
state is applied on P arent trigger elementThe <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>