Overview

Rotate effect will turn the element using CSS rotateX, rotateY and rotateZ property.

Syntax

Use data-tor-fx="<trigger>:@transform.<rotateX|rotateY|rotateZ>(<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-tor-fx="scroll:@transform.<rotateX|rotateY|rotateZ>(<amount>)".

<div data-tor-fx="mouse:@transform.rotateX(0deg;90deg)">rotateX</div>
<div data-tor-fx="mouse:@transform.rotateY(0deg;90deg)">rotateY</div>
<div data-tor-fx="mouse:@transform.rotateZ(0deg;90deg)">rotateY</div>

mouse

To rotate the element when moving the cursor over both x and y axis, use data-tor-fx="mouse:@transform.rotateX(<amount>)" for horizontal rotate and data-tor-fx="mouse:@transform.rotateY(<amount>)" for vertical rotate.

<div data-tor-fx="mouse:@transform.rotateX(0deg;90deg)__origin(start)">rotateX</div>
<div data-tor-fx="mouse:@transform.rotateY(0deg;90deg)__origin(start)">rotateY</div>
<div data-tor-fx="mouse:@transform.rotateZ(0deg;90deg)__origin(start)">rotateY</div>

mouseX

To rotate the element when moving the cursor over x axis, use data-tor-fx="mouseX:@transform.<rotateX|rotateY|rotateZ>(<amount>)"

<div data-tor-fx="mouseX:@transform.rotateX(0deg;90deg)__origin(start)">rotateX</div>
<div data-tor-fx="mouseX:@transform.rotateY(0deg;90deg)__origin(start)">rotateY</div>
<div data-tor-fx="mouseX:@transform.rotateZ(0deg;90deg)__origin(start)">rotateY</div>

mouseY

To rotate the element when moving the cursor over y axis, use data-tor-fx="mouseY:@transform.<rotateX|rotateY|rotateZ>(<amount>)"

<div data-tor-fx="mouseY:@transform.rotateX(0deg;90deg)__origin(start)">rotateX</div>
<div data-tor-fx="mouseY:@transform.rotateY(0deg;90deg)__origin(start)">rotateY</div>
<div data-tor-fx="mouseY:@transform.rotateZ(0deg;90deg)__origin(start)">rotateY</div>