Built in Rotate

Rotate the elements in various angles over the x, y, and z-axis. Create flip card in a minutes

Overview

Easily rotate elements in 3D space using rotate.to() or rotate.from() syntax.

Triggers

Rotate

To rotate the element when <trigger> is performed on a single element, use data-tor-fx="<trigger>:rotate<direction>.to(<value>) where <trigger> is:

  • inview: - when element appears in the viewport and gets .inview class
  • active: - when element gets .active class
  • show: - when element gets .show class
  • hover: - when element gets :hover state

The <direction> is one of:

  • rotate.to - default rotate over z-axis
  • rotateX.to - rotate over x-axis
  • rotateY.to - rotate over y-axis

And the <value> is one of:

  • 10, 45, 90, 180 and 360 predefined values
  • any custom CSS rotation value. Example rotate.to(35deg)

z-axis (default)

rotate.to(10)
rotate.to(45)
rotate.to(90)
rotate.to(180)
rotate.to(360)
rotate.to(35deg)
<div data-tor-fx="hover:rotate.to(10)">rotate.to(10)</div>
<div data-tor-fx="hover:rotate.to(45)">rotate.to(45)</div>
<div data-tor-fx="hover:rotate.to(90)">rotate.to(90)</div>
<div data-tor-fx="hover:rotate.to(180)">rotate.to(180)</div>
<div data-tor-fx="hover:rotate.to(360)">rotate.to(360)</div>
<div data-tor-fx="hover:rotate.to(35deg)">rotate.to(35deg)</div>
rotate.to(10)
rotate.to(45)
rotate.to(90)
rotate.to(180)
rotate.to(360)
rotate.to(35deg)
<div data-tor-fx="active:rotate.to(10)">rotate.to(10)</div>
<div data-tor-fx="active:rotate.to(45)">rotate.to(45)</div>
<div data-tor-fx="active:rotate.to(90)">rotate.to(90)</div>
<div data-tor-fx="active:rotate.to(180)">rotate.to(180)</div>
<div data-tor-fx="active:rotate.to(360)">rotate.to(360)</div>
<div data-tor-fx="active:rotate.to(35deg)">rotate.to(35deg)</div>
rotate.to(10)
rotate.to(45)
rotate.to(90)
rotate.to(180)
rotate.to(360)
rotate.to(35deg)
<div data-tor-fx="inview:rotate.to(10)">rotate.to(10)</div>
<div data-tor-fx="inview:rotate.to(45)">rotate.to(45)</div>
<div data-tor-fx="inview:rotate.to(90)">rotate.to(90)</div>
<div data-tor-fx="inview:rotate.to(180)">rotate.to(180)</div>
<div data-tor-fx="inview:rotate.to(360)">rotate.to(360)</div>
<div data-tor-fx="inview:rotate.to(35deg)">rotate.to(35deg)</div>

x-axis

rotateX.to(10)
rotateX.to(45)
rotateX.to(90)
rotateX.to(180)
rotateX.to(360)
rotateX.to(35deg)
<div data-tor-fx="hover:rotateX.to(10)">rotateX.to(10)</div>
<div data-tor-fx="hover:rotateX.to(45)">rotateX.to(45)</div>
<div data-tor-fx="hover:rotateX.to(90)">rotateX.to(90)</div>
<div data-tor-fx="hover:rotateX.to(180)">rotateX.to(180)</div>
<div data-tor-fx="hover:rotateX.to(360)">rotateX.to(360)</div>
<div data-tor-fx="hover:rotateX.to(35deg)">rotateX.to(35deg)</div>
rotateX.to(10)
rotateX.to(45)
rotateX.to(90)
rotateX.to(180)
rotateX.to(360)
rotateX.to(35deg)
<div data-tor-fx="active:rotateX.to(10)">rotateX.to(10)</div>
<div data-tor-fx="active:rotateX.to(45)">rotateX.to(45)</div>
<div data-tor-fx="active:rotateX.to(90)">rotateX.to(90)</div>
<div data-tor-fx="active:rotateX.to(180)">rotateX.to(180)</div>
<div data-tor-fx="active:rotateX.to(360)">rotateX.to(360)</div>
<div data-tor-fx="active:rotateX.to(35deg)">rotateX.to(35deg)</div>
rotateX.to(10)
rotateX.to(45)
rotateX.to(90)
rotateX.to(180)
rotateX.to(360)
rotateX.to(35deg)
<div data-tor-fx="inview:rotateX.to(10)">rotateX.to(10)</div>
<div data-tor-fx="inview:rotateX.to(45)">rotateX.to(45)</div>
<div data-tor-fx="inview:rotateX.to(90)">rotateX.to(90)</div>
<div data-tor-fx="inview:rotateX.to(180)">rotateX.to(180)</div>
<div data-tor-fx="inview:rotateX.to(360)">rotateX.to(360)</div>
<div data-tor-fx="inview:rotateX.to(35deg)">rotateX.to(35deg)</div>

y-axis

rotateY.to(10)
rotateY.to(45)
rotateY.to(90)
rotateY.to(180)
rotateY.to(360)
rotateY.to(35deg)
<div data-tor-fx="hover:rotateY.to(10)">rotateY.to(10)</div>
<div data-tor-fx="hover:rotateY.to(45)">rotateY.to(45)</div>
<div data-tor-fx="hover:rotateY.to(90)">rotateY.to(90)</div>
<div data-tor-fx="hover:rotateY.to(180)">rotateY.to(180)</div>
<div data-tor-fx="hover:rotateY.to(360)">rotateY.to(360)</div>
<div data-tor-fx="hover:rotateY.to(35deg)">rotateY.to(35deg)</div>
rotateY.to(10)
rotateY.to(45)
rotateY.to(90)
rotateY.to(180)
rotateY.to(360)
rotateY.to(35deg)
<div data-tor-fx="active:rotateY.to(10)">rotateY.to(10)</div>
<div data-tor-fx="active:rotateY.to(45)">rotateY.to(45)</div>
<div data-tor-fx="active:rotateY.to(90)">rotateY.to(90)</div>
<div data-tor-fx="active:rotateY.to(180)">rotateY.to(180)</div>
<div data-tor-fx="active:rotateY.to(360)">rotateY.to(360)</div>
<div data-tor-fx="active:rotateY.to(35deg)">rotateY.to(35deg)</div>
rotateY.to(10)
rotateY.to(45)
rotateY.to(90)
rotateY.to(180)
rotateY.to(360)
rotateY.to(35deg)
<div data-tor-fx="inview:rotateY.to(10)">rotateY.to(10)</div>
<div data-tor-fx="inview:rotateY.to(45)">rotateY.to(45)</div>
<div data-tor-fx="inview:rotateY.to(90)">rotateY.to(90)</div>
<div data-tor-fx="inview:rotateY.to(180)">rotateY.to(180)</div>
<div data-tor-fx="inview:rotateY.to(360)">rotateY.to(360)</div>
<div data-tor-fx="inview:rotateY.to(35deg)">rotateY.to(35deg)</div>

Rotate from

To rotate the element back to its original position when <trigger> is performed on a single element, use data-tor-fx="<trigger>:rotate<direction>.from(<value>) where <trigger> is:

  • inview: - when element appears in the viewport and gets .inview class
  • active: - when element gets .active class
  • show: - when element gets .show class
  • hover: - when element gets :hover state

The <direction> is one of:

  • rotate.from - default rotate over z-axis
  • rotateX.from - rotate over x-axis
  • rotateY.from - rotate over y-axis

And the <value> is one of:

  • 10, 45, 90, 180 and 360 predefined values
  • any custom CSS rotation value. Example rotate.from(35deg)

z-axis (default)

rotate.from(10)
rotate.from(45)
rotate.from(90)
rotate.from(180)
rotate.from(360)
rotate.from(35deg)
<div data-tor-fx="hover:rotate.from(10)">rotate.from(10)</div>
<div data-tor-fx="hover:rotate.from(45)">rotate.from(45)</div>
<div data-tor-fx="hover:rotate.from(90)">rotate.from(90)</div>
<div data-tor-fx="hover:rotate.from(180)">rotate.from(180)</div>
<div data-tor-fx="hover:rotate.from(360)">rotate.from(360)</div>
<div data-tor-fx="hover:rotate.from(35deg)">rotate.from(35deg)</div>
rotate.from(10)
rotate.from(45)
rotate.from(90)
rotate.from(180)
rotate.from(360)
rotate.from(35deg)
<div data-tor-fx="active:rotate.from(10)">rotate.from(10)</div>
<div data-tor-fx="active:rotate.from(45)">rotate.from(45)</div>
<div data-tor-fx="active:rotate.from(90)">rotate.from(90)</div>
<div data-tor-fx="active:rotate.from(180)">rotate.from(180)</div>
<div data-tor-fx="active:rotate.from(360)">rotate.from(360)</div>
<div data-tor-fx="active:rotate.from(35deg)">rotate.from(35deg)</div>
rotate.from(10)
rotate.from(45)
rotate.from(90)
rotate.from(180)
rotate.from(360)
rotate.from(35deg)
<div data-tor-fx="inview:rotate.from(10)">rotate.from(10)</div>
<div data-tor-fx="inview:rotate.from(45)">rotate.from(45)</div>
<div data-tor-fx="inview:rotate.from(90)">rotate.from(90)</div>
<div data-tor-fx="inview:rotate.from(180)">rotate.from(180)</div>
<div data-tor-fx="inview:rotate.from(360)">rotate.from(360)</div>
<div data-tor-fx="inview:rotate.from(35deg)">rotate.from(35deg)</div>

x-axis

rotateX.from(10)
rotateX.from(45)
rotateX.from(90)
rotateX.from(180)
rotateX.from(360)
rotateX.from(35deg)
<div data-tor-fx="hover:rotateX.from(10)">rotateX.from(10)</div>
<div data-tor-fx="hover:rotateX.from(45)">rotateX.from(45)</div>
<div data-tor-fx="hover:rotateX.from(90)">rotateX.from(90)</div>
<div data-tor-fx="hover:rotateX.from(180)">rotateX.from(180)</div>
<div data-tor-fx="hover:rotateX.from(360)">rotateX.from(360)</div>
<div data-tor-fx="hover:rotateX.from(35deg)">rotateX.from(35deg)</div>
rotateX.from(10)
rotateX.from(45)
rotateX.from(90)
rotateX.from(180)
rotateX.from(360)
rotateX.from(35deg)
<div data-tor-fx="active:rotateX.from(10)">rotateX.from(10)</div>
<div data-tor-fx="active:rotateX.from(45)">rotateX.from(45)</div>
<div data-tor-fx="active:rotateX.from(90)">rotateX.from(90)</div>
<div data-tor-fx="active:rotateX.from(180)">rotateX.from(180)</div>
<div data-tor-fx="active:rotateX.from(360)">rotateX.from(360)</div>
<div data-tor-fx="active:rotateX.from(35deg)">rotateX.from(35deg)</div>
rotateX.from(10)
rotateX.from(45)
rotateX.from(90)
rotateX.from(180)
rotateX.from(360)
rotateX.from(35deg)
<div data-tor-fx="inview:rotateX.from(10)">rotateX.from(10)</div>
<div data-tor-fx="inview:rotateX.from(45)">rotateX.from(45)</div>
<div data-tor-fx="inview:rotateX.from(90)">rotateX.from(90)</div>
<div data-tor-fx="inview:rotateX.from(180)">rotateX.from(180)</div>
<div data-tor-fx="inview:rotateX.from(360)">rotateX.from(360)</div>
<div data-tor-fx="inview:rotateX.from(35deg)">rotateX.from(35deg)</div>

y-axis

rotateY.from(10)
rotateY.from(45)
rotateY.from(90)
rotateY.from(180)
rotateY.from(360)
rotateY.from(35deg)
<div data-tor-fx="hover:rotateY.from(10)">rotateY.from(10)</div>
<div data-tor-fx="hover:rotateY.from(45)">rotateY.from(45)</div>
<div data-tor-fx="hover:rotateY.from(90)">rotateY.from(90)</div>
<div data-tor-fx="hover:rotateY.from(180)">rotateY.from(180)</div>
<div data-tor-fx="hover:rotateY.from(360)">rotateY.from(360)</div>
<div data-tor-fx="hover:rotateY.from(35deg)">rotateY.from(35deg)</div>
rotateY.from(10)
rotateY.from(45)
rotateY.from(90)
rotateY.from(180)
rotateY.from(360)
rotateY.from(35deg)
<div data-tor-fx="active:rotateY.from(10)">rotateY.from(10)</div>
<div data-tor-fx="active:rotateY.from(45)">rotateY.from(45)</div>
<div data-tor-fx="active:rotateY.from(90)">rotateY.from(90)</div>
<div data-tor-fx="active:rotateY.from(180)">rotateY.from(180)</div>
<div data-tor-fx="active:rotateY.from(360)">rotateY.from(360)</div>
<div data-tor-fx="active:rotateY.from(35deg)">rotateY.from(35deg)</div>
rotateY.from(10)
rotateY.from(45)
rotateY.from(90)
rotateY.from(180)
rotateY.from(360)
rotateY.from(35deg)
<div data-tor-fx="inview:rotateY.from(10)">rotateY.from(10)</div>
<div data-tor-fx="inview:rotateY.from(45)">rotateY.from(45)</div>
<div data-tor-fx="inview:rotateY.from(90)">rotateY.from(90)</div>
<div data-tor-fx="inview:rotateY.from(180)">rotateY.from(180)</div>
<div data-tor-fx="inview:rotateY.from(360)">rotateY.from(360)</div>
<div data-tor-fx="inview:rotateY.from(35deg)">rotateY.from(35deg)</div>

Parent triggers

Rotate

To rotate the element of a single or multiple child elements when <trigger> is performed on a parent element, add data-tor-fx-trigger="<inview|active|show|hover> to indicate that this is a parent element with the desired trigger - if this parent trigger is performed, child elements will be affected (will change)

Than add data-tor-fx="<trigger>:rotate<direction>.to(<value>) attribute to child elements where <trigger> is:

  • inview-T: - when .inview class is applied on parent Trigger element, because it's visible in the viewport
  • active-T: - when .active class is applied on parent Trigger element
  • show-T: - when .show class is applied on parent Trigger element
  • hover-T: - when hover state is applied on parent Trigger element

The <direction> is one of:

  • rotate.to - default rotate over z-axis
  • rotateX.to - rotate over x-axis
  • rotateY.to - rotate over y-axis

And the <value> is one of:

  • 10, 45, 90, 180 and 360 predefined values
  • any custom CSS rotation value. Example rotate.to(35deg)

z-axis (default)

rotate.to(10)
rotate.to(45)
rotate.to(90)
rotate.to(180)
rotate.to(360)
rotate.to(35deg)
<div data-tor-fx="hover-T:rotate.to(10)">rotate.to(10)</div>
<div data-tor-fx="hover-T:rotate.to(45)">rotate.to(45)</div>
<div data-tor-fx="hover-T:rotate.to(90)">rotate.to(90)</div>
<div data-tor-fx="hover-T:rotate.to(180)">rotate.to(180)</div>
<div data-tor-fx="hover-T:rotate.to(360)">rotate.to(360)</div>
<div data-tor-fx="hover-T:rotate.to(35deg)">rotate.to(35deg)</div>
rotate.to(10)
rotate.to(45)
rotate.to(90)
rotate.to(180)
rotate.to(360)
rotate.to(35deg)
<div data-tor-fx="active-T:rotate.to(10)">rotate.to(10)</div>
<div data-tor-fx="active-T:rotate.to(45)">rotate.to(45)</div>
<div data-tor-fx="active-T:rotate.to(90)">rotate.to(90)</div>
<div data-tor-fx="active-T:rotate.to(180)">rotate.to(180)</div>
<div data-tor-fx="active-T:rotate.to(360)">rotate.to(360)</div>
<div data-tor-fx="active-T:rotate.to(35deg)">rotate.to(35deg)</div>
rotate.to(10)
rotate.to(45)
rotate.to(90)
rotate.to(180)
rotate.to(360)
rotate.to(35deg)
<div data-tor-fx="inview-T:rotate.to(10)">rotate.to(10)</div>
<div data-tor-fx="inview-T:rotate.to(45)">rotate.to(45)</div>
<div data-tor-fx="inview-T:rotate.to(90)">rotate.to(90)</div>
<div data-tor-fx="inview-T:rotate.to(180)">rotate.to(180)</div>
<div data-tor-fx="inview-T:rotate.to(360)">rotate.to(360)</div>
<div data-tor-fx="inview-T:rotate.to(35deg)">rotate.to(35deg)</div>

x-axis

rotateX.to(10)
rotateX.to(45)
rotateX.to(90)
rotateX.to(180)
rotateX.to(360)
rotateX.to(35deg)
<div data-tor-fx="hover-T:rotateX.to(10)">rotateX.to(10)</div>
<div data-tor-fx="hover-T:rotateX.to(45)">rotateX.to(45)</div>
<div data-tor-fx="hover-T:rotateX.to(90)">rotateX.to(90)</div>
<div data-tor-fx="hover-T:rotateX.to(180)">rotateX.to(180)</div>
<div data-tor-fx="hover-T:rotateX.to(360)">rotateX.to(360)</div>
<div data-tor-fx="hover-T:rotateX.to(35deg)">rotateX.to(35deg)</div>
rotateX.to(10)
rotateX.to(45)
rotateX.to(90)
rotateX.to(180)
rotateX.to(360)
rotateX.to(35deg)
<div data-tor-fx="active-T:rotateX.to(10)">rotateX.to(10)</div>
<div data-tor-fx="active-T:rotateX.to(45)">rotateX.to(45)</div>
<div data-tor-fx="active-T:rotateX.to(90)">rotateX.to(90)</div>
<div data-tor-fx="active-T:rotateX.to(180)">rotateX.to(180)</div>
<div data-tor-fx="active-T:rotateX.to(360)">rotateX.to(360)</div>
<div data-tor-fx="active-T:rotateX.to(35deg)">rotateX.to(35deg)</div>
rotateX.to(10)
rotateX.to(45)
rotateX.to(90)
rotateX.to(180)
rotateX.to(360)
rotateX.to(35deg)
<div data-tor-fx="inview-T:rotateX.to(10)">rotateX.to(10)</div>
<div data-tor-fx="inview-T:rotateX.to(45)">rotateX.to(45)</div>
<div data-tor-fx="inview-T:rotateX.to(90)">rotateX.to(90)</div>
<div data-tor-fx="inview-T:rotateX.to(180)">rotateX.to(180)</div>
<div data-tor-fx="inview-T:rotateX.to(360)">rotateX.to(360)</div>
<div data-tor-fx="inview-T:rotateX.to(35deg)">rotateX.to(35deg)</div>

y-axis

rotateY.to(10)
rotateY.to(45)
rotateY.to(90)
rotateY.to(180)
rotateY.to(360)
rotateY.to(35deg)
<div data-tor-fx="hover-T:rotateY.to(10)">rotateY.to(10)</div>
<div data-tor-fx="hover-T:rotateY.to(45)">rotateY.to(45)</div>
<div data-tor-fx="hover-T:rotateY.to(90)">rotateY.to(90)</div>
<div data-tor-fx="hover-T:rotateY.to(180)">rotateY.to(180)</div>
<div data-tor-fx="hover-T:rotateY.to(360)">rotateY.to(360)</div>
<div data-tor-fx="hover-T:rotateY.to(35deg)">rotateY.to(35deg)</div>
rotateY.to(10)
rotateY.to(45)
rotateY.to(90)
rotateY.to(180)
rotateY.to(360)
rotateY.to(35deg)
<div data-tor-fx="active-T:rotateY.to(10)">rotateY.to(10)</div>
<div data-tor-fx="active-T:rotateY.to(45)">rotateY.to(45)</div>
<div data-tor-fx="active-T:rotateY.to(90)">rotateY.to(90)</div>
<div data-tor-fx="active-T:rotateY.to(180)">rotateY.to(180)</div>
<div data-tor-fx="active-T:rotateY.to(360)">rotateY.to(360)</div>
<div data-tor-fx="active-T:rotateY.to(35deg)">rotateY.to(35deg)</div>
rotateY.to(10)
rotateY.to(45)
rotateY.to(90)
rotateY.to(180)
rotateY.to(360)
rotateY.to(35deg)
<div data-tor-fx="inview-T:rotateY.to(10)">rotateY.to(10)</div>
<div data-tor-fx="inview-T:rotateY.to(45)">rotateY.to(45)</div>
<div data-tor-fx="inview-T:rotateY.to(90)">rotateY.to(90)</div>
<div data-tor-fx="inview-T:rotateY.to(180)">rotateY.to(180)</div>
<div data-tor-fx="inview-T:rotateY.to(360)">rotateY.to(360)</div>
<div data-tor-fx="inview-T:rotateY.to(35deg)">rotateY.to(35deg)</div>

Rotate from

To rotate the element back to its original position of a single or multiple child elements when <trigger> is performed on a parent element, add data-tor-fx-trigger="<inview|active|show|hover> to indicate that this is a parent element with the desired trigger - if this parent trigger is performed, child elements will be affected (will change)

Than add data-tor-fx="<trigger>:rotate.from(<value>) attribute to child elements where <trigger> is:

  • inview-T: - when .inview class is applied on parent Trigger element, because it's visible in the viewport
  • active-T: - when .active class is applied on parent Trigger element
  • show-T: - when .show class is applied on parent Trigger element
  • hover-T: - when hover state is applied on parent Trigger element

The <direction> is one of:

  • rotate.from - default rotate over z-axis
  • rotateX.from - rotate over x-axis
  • rotateY.from - rotate over y-axis

And the <value> is one of:

  • 10, 45, 90, 180 and 360 predefined values
  • any custom CSS rotation value. Example rotate.from(35deg)

z-axis (default)

rotate.from(10)
rotate.from(45)
rotate.from(90)
rotate.from(180)
rotate.from(360)
rotate.from(35deg)
<div data-tor-fx="hover-T:rotate.from(10)">rotate.from(10)</div>
<div data-tor-fx="hover-T:rotate.from(45)">rotate.from(45)</div>
<div data-tor-fx="hover-T:rotate.from(90)">rotate.from(90)</div>
<div data-tor-fx="hover-T:rotate.from(180)">rotate.from(180)</div>
<div data-tor-fx="hover-T:rotate.from(360)">rotate.from(360)</div>
<div data-tor-fx="hover-T:rotate.from(35deg)">rotate.from(35deg)</div>
rotate.from(10)
rotate.from(45)
rotate.from(90)
rotate.from(180)
rotate.from(360)
rotate.from(35deg)
<div data-tor-fx="active-T:rotate.from(10)">rotate.from(10)</div>
<div data-tor-fx="active-T:rotate.from(45)">rotate.from(45)</div>
<div data-tor-fx="active-T:rotate.from(90)">rotate.from(90)</div>
<div data-tor-fx="active-T:rotate.from(180)">rotate.from(180)</div>
<div data-tor-fx="active-T:rotate.from(360)">rotate.from(360)</div>
<div data-tor-fx="active-T:rotate.from(35deg)">rotate.from(35deg)</div>
rotate.from(10)
rotate.from(45)
rotate.from(90)
rotate.from(180)
rotate.from(360)
rotate.from(35deg)
<div data-tor-fx="inview-T:rotate.from(10)">rotate.from(10)</div>
<div data-tor-fx="inview-T:rotate.from(45)">rotate.from(45)</div>
<div data-tor-fx="inview-T:rotate.from(90)">rotate.from(90)</div>
<div data-tor-fx="inview-T:rotate.from(180)">rotate.from(180)</div>
<div data-tor-fx="inview-T:rotate.from(360)">rotate.from(360)</div>
<div data-tor-fx="inview-T:rotate.from(35deg)">rotate.from(35deg)</div>

x-axis

rotateX.from(10)
rotateX.from(45)
rotateX.from(90)
rotateX.from(180)
rotateX.from(360)
rotateX.from(35deg)
<div data-tor-fx="hover-T:rotateX.from(10)">rotateX.from(10)</div>
<div data-tor-fx="hover-T:rotateX.from(45)">rotateX.from(45)</div>
<div data-tor-fx="hover-T:rotateX.from(90)">rotateX.from(90)</div>
<div data-tor-fx="hover-T:rotateX.from(180)">rotateX.from(180)</div>
<div data-tor-fx="hover-T:rotateX.from(360)">rotateX.from(360)</div>
<div data-tor-fx="hover-T:rotateX.from(35deg)">rotateX.from(35deg)</div>
rotateX.from(10)
rotateX.from(45)
rotateX.from(90)
rotateX.from(180)
rotateX.from(360)
rotateX.from(35deg)
<div data-tor-fx="active-T:rotateX.from(10)">rotateX.from(10)</div>
<div data-tor-fx="active-T:rotateX.from(45)">rotateX.from(45)</div>
<div data-tor-fx="active-T:rotateX.from(90)">rotateX.from(90)</div>
<div data-tor-fx="active-T:rotateX.from(180)">rotateX.from(180)</div>
<div data-tor-fx="active-T:rotateX.from(360)">rotateX.from(360)</div>
<div data-tor-fx="active-T:rotateX.from(35deg)">rotateX.from(35deg)</div>
rotateX.from(10)
rotateX.from(45)
rotateX.from(90)
rotateX.from(180)
rotateX.from(360)
rotateX.from(35deg)
<div data-tor-fx="inview-T:rotateX.from(10)">rotateX.from(10)</div>
<div data-tor-fx="inview-T:rotateX.from(45)">rotateX.from(45)</div>
<div data-tor-fx="inview-T:rotateX.from(90)">rotateX.from(90)</div>
<div data-tor-fx="inview-T:rotateX.from(180)">rotateX.from(180)</div>
<div data-tor-fx="inview-T:rotateX.from(360)">rotateX.from(360)</div>
<div data-tor-fx="inview-T:rotateX.from(35deg)">rotateX.from(35deg)</div>

y-axis

rotateY.from(10)
rotateY.from(45)
rotateY.from(90)
rotateY.from(180)
rotateY.from(360)
rotateY.from(35deg)
<div data-tor-fx="hover-T:rotateY.from(10)">rotateY.from(10)</div>
<div data-tor-fx="hover-T:rotateY.from(45)">rotateY.from(45)</div>
<div data-tor-fx="hover-T:rotateY.from(90)">rotateY.from(90)</div>
<div data-tor-fx="hover-T:rotateY.from(180)">rotateY.from(180)</div>
<div data-tor-fx="hover-T:rotateY.from(360)">rotateY.from(360)</div>
<div data-tor-fx="hover-T:rotateY.from(35deg)">rotateY.from(35deg)</div>
rotateY.from(10)
rotateY.from(45)
rotateY.from(90)
rotateY.from(180)
rotateY.from(360)
rotateY.from(35deg)
<div data-tor-fx="active-T:rotateY.from(10)">rotateY.from(10)</div>
<div data-tor-fx="active-T:rotateY.from(45)">rotateY.from(45)</div>
<div data-tor-fx="active-T:rotateY.from(90)">rotateY.from(90)</div>
<div data-tor-fx="active-T:rotateY.from(180)">rotateY.from(180)</div>
<div data-tor-fx="active-T:rotateY.from(360)">rotateY.from(360)</div>
<div data-tor-fx="active-T:rotateY.from(35deg)">rotateY.from(35deg)</div>
rotateY.from(10)
rotateY.from(45)
rotateY.from(90)
rotateY.from(180)
rotateY.from(360)
rotateY.from(35deg)
<div data-tor-fx="inview-T:rotateY.from(10)">rotateY.from(10)</div>
<div data-tor-fx="inview-T:rotateY.from(45)">rotateY.from(45)</div>
<div data-tor-fx="inview-T:rotateY.from(90)">rotateY.from(90)</div>
<div data-tor-fx="inview-T:rotateY.from(180)">rotateY.from(180)</div>
<div data-tor-fx="inview-T:rotateY.from(360)">rotateY.from(360)</div>
<div data-tor-fx="inview-T:rotateY.from(35deg)">rotateY.from(35deg)</div>