Pro

Spin

Rotate the element in clockwise or counter-clockwise

Overview

Use spin or spin-back values in data-fx data attribute to rotate the element along the Z axis. Default rotate distance is 360deg, means that element will rotate all the way around the z-axis to starting 0deg position. Read more in Distance section.

How to use

Use data-fx="{action}:rotate" data attribute to rotate the element in clock wise direction.

Where {action} is one of:

  • h: to animate an element when it’s hovered
  • a: to animate an element when it gets .active class
  • th: to animate an element when the parent trigger is hovered
  • ta: to animate an element when the parent trigger gets .active or .show class

On hover

To rotate a single element in clock wise direction on its hover, add data-fx="h:spin" data attribute.

h:spin
<div data-fx="h:spin">h:spin</div>

On active

To rotate a single element in clock wise direction when it gets .active class, add data-fx="a:spin" data attribute.

Click the elements to toggle its .active class
a:spin
<div data-fx="a:spin">a:spin</div>

On trigger hover

Rotate a single or multiple elements when the parent trigger is hovered. At first, indicate what is parent trigger element by adding data-trigger="hover" attribute to it, then add data-fx="th:spin" data attribute to elements you want to rotate when trigger is hovered.

Hover this trigger
th:spin
<div data-trigger="hover">
  <div data-fx="th:spin">th:spin</div>
</div>

On trigger active

Rotate a single or multiple elements when the parent trigger gets .active or .show class. At first, indicate what is parent trigger element by adding data-trigger="{active|show}" attribute to it, then add data-fx="ta:spin-{direction}" data attribute to elements you want to rotate when trigger is hovered.

Click this trigger to toggle its .active class
ta:spin
<div data-trigger="active">
  <div data-fx="ta:spin">ta:spin</div>
</div>

Spin back (counter clock wise)

Use data-fx="{action}:spin-back" data attribute to rotate the element in counter clock wise direction.

On hover

To rotate a single element in counter clock wise direction on its hover, add data-fx="h:spin-back" data attribute.

h:spin-back
<div data-fx="h:spin-back">h:spin-back</div>

On active

To rotate a single element in counter clock wise direction when it gets .active class, add data-fx="a:spin-back" data attribute.

Click the elements to toggle its .active class
a:spin-back
<div data-fx="a:spin">a:spin</div>

On trigger hover

Rotate a single or multiple elements when the parent trigger is hovered. At first, indicate what is parent trigger element by adding data-trigger="hover" attribute to it, then add data-fx="th:spin" data attribute to elements you want to rotate when trigger is hovered.

Hover this trigger
th:spin-back
<div data-trigger="hover">
  <div data-fx="th:spin-back">th:spin-back</div>
</div>

On trigger active

Rotate a single or multiple elements in counter clock wise direction when the parent trigger gets .active or .show class. At first, indicate what is parent trigger element by adding data-trigger="{active|show}" attribute to it, then add data-fx="ta:spin-back" data attribute to elements you want to rotate when trigger is hovered.

Click this trigger to toggle its .active class
ta:spin-back
<div data-trigger="active">
  <div data-fx="ta:spin-back">ta:spin-back</div>
</div>

Distance

You can change the default 360deg rotate distance (value) by adding spin-{short|quart|half} value to data-fx attribute where:

  • spin-short will rotate the element by 7deg
  • spin-quart will rotate the element by 90deg
  • spin-half will rotate the element by 180deg

It can be combined it with any {action} in data-fx="{action}:move-*" attribute

Spin

h:spin
h:spin spin-short
h:spin spin-quart
h:spin spin-half
<div data-fx="h:spin">h:spin</div>
<div data-fx="h:spin spin-short">h:spin spin-short</div>
<div data-fx="h:spin spin-quart">h:spin spin-quart</div>
<div data-fx="h:spin spin-half">h:spin spin-half</div>
Hover this trigger
th:spin
th:spin spin-short
th:spin spin-quart
th:spin spin-half
<div data-trigger="hover">
  <div data-fx="th:spin">th:spin</div>
  <div data-fx="th:spin spin-short">th:spin spin-short</div>
  <div data-fx="th:spin spin-quart">th:spin spin-quart</div>
  <div data-fx="th:spin spin-half">th:spin spin-half</div>
</div>

Spin counter clock wise

h:spin-back
h:spin-back spin-short
h:spin-back spin-quart
h:spin-back spin-half
<div data-fx="h:spin-back">h:spin-back</div>
<div data-fx="h:spin-back spin-short">h:spin-back spin-short</div>
<div data-fx="h:spin-back spin-quart">h:spin-back spin-quart</div>
<div data-fx="h:spin-back spin-half">h:spin-back spin-half</div>
Hover this trigger
th:spin-back
th:spin-back spin-short
th:spin-back spin-quart
th:spin-back spin-half
<div data-trigger="hover">
  <div data-fx="th:spin-back">th:spin-back</div>
  <div data-fx="th:spin-back spin-short">th:spin-back spin-short</div>
  <div data-fx="th:spin-back spin-quart">th:spin-back spin-quart</div>
  <div data-fx="th:spin-back spin-half">th:spin-back spin-half</div>
</div>