Overview
Rotate effect will turn the element using CSS rotateX
, rotateY
and rotateZ
property.
Syntax
Use data-fx="{trigger}:@{rotateX|rotateY}[{start};{end}]
to rotate the element over x or y axis. The {start}
value represents the beginning rotate value, while the {end}
is the finish value.
Examples
The {mouse}
examples uses __origin[start]
for more natural behavior. Try to move the cursor from the screen top-left corner into the bottom-right, the left edge to the right one, and from the top edge into the bottom.
scroll
To rotate the element when scrolling the page, use data-fx="scroll:@{rotateX|rotateY}[{amount}]"
.
<div data-fx="mouse:@rotateX[0deg;90deg]">rotateX</div>
<div data-fx="mouse:@rotateY[0deg;90deg]">rotateY</div>
<div data-fx="mouse:@rotateZ[0deg;90deg]">rotateY</div>
mouse
To rotate the element when moving the cursor over both x and y axis, use data-fx="mouse:@rotateX[{amount}]"
for horizontal rotate and data-fx="mouse:@rotateY[{amount}]"
for vertical rotate.
<div data-fx="mouse:@rotateX[0deg;90deg]__origin[start]">rotateX</div>
<div data-fx="mouse:@rotateY[0deg;90deg]__origin[start]">rotateY</div>
<div data-fx="mouse:@rotateZ[0deg;90deg]__origin[start]">rotateY</div>
mouse-x
To rotate the element when moving the cursor over x axis, use data-fx="mouse-x:@{rotateX|rotateY}[{amount}]"
<div data-fx="mouse-x:@rotateX[0deg;90deg]__origin[start]">rotateX</div>
<div data-fx="mouse-x:@rotateY[0deg;90deg]__origin[start]">rotateY</div>
<div data-fx="mouse-x:@rotateZ[0deg;90deg]__origin[start]">rotateY</div>
mouse-y
To rotate the element when moving the cursor over y axis, use data-fx="mouse-y:@{rotateX|rotateY}[{amount}]"
<div data-fx="mouse-y:@rotateX[0deg;90deg]__origin[start]">rotateX</div>
<div data-fx="mouse-y:@rotateY[0deg;90deg]__origin[start]">rotateY</div>
<div data-fx="mouse-y:@rotateZ[0deg;90deg]__origin[start]">rotateY</div>