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>