Enhanced Bootstrap Rotate

Custom Rotate PRO

Rotate the element over x, y and z axis based on user interaction

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}]".

rotateX
rotateY
rotateY
<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.

rotateX
rotateY
rotateY
<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}]"

rotateX
rotateY
rotateY
<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}]"

rotateX
rotateY
rotateY
<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>