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> can be any custom CSS rotation value. Example rotate.to(35deg)

z-axis (default)

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

x-axis

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

y-axis

rotateY.to(10deg)
rotateY.to(45deg)
rotateY.to(90deg)
rotateY.to(180deg)
rotateY.to(360deg)
<div data-tor="hover:rotateY.to(10deg)">rotateY.to(10deg)</div>
<div data-tor="hover:rotateY.to(45deg)">rotateY.to(45deg)</div>
<div data-tor="hover:rotateY.to(90deg)">rotateY.to(90deg)</div>
<div data-tor="hover:rotateY.to(180deg)">rotateY.to(180deg)</div>
<div data-tor="hover:rotateY.to(360deg)">rotateY.to(360deg)</div>
rotateY.to(10deg)
rotateY.to(45deg)
rotateY.to(90deg)
rotateY.to(180deg)
rotateY.to(360deg)
<div data-tor="active:rotateY.to(10deg)">rotateY.to(10deg)</div>
<div data-tor="active:rotateY.to(45deg)">rotateY.to(45deg)</div>
<div data-tor="active:rotateY.to(90deg)">rotateY.to(90deg)</div>
<div data-tor="active:rotateY.to(180deg)">rotateY.to(180deg)</div>
<div data-tor="active:rotateY.to(360deg)">rotateY.to(360deg)</div>
rotateY.to(10deg)
rotateY.to(45deg)
rotateY.to(90deg)
rotateY.to(180deg)
rotateY.to(360deg)
<div data-tor="inview:rotateY.to(10deg)">rotateY.to(10deg)</div>
<div data-tor="inview:rotateY.to(45deg)">rotateY.to(45deg)</div>
<div data-tor="inview:rotateY.to(90deg)">rotateY.to(90deg)</div>
<div data-tor="inview:rotateY.to(180deg)">rotateY.to(180deg)</div>
<div data-tor="inview:rotateY.to(360deg)">rotateY.to(360deg)</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> can be any custom CSS rotation value. Example rotate.from(35deg)

z-axis (default)

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

x-axis

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

y-axis

rotateY.from(10deg)
rotateY.from(45deg)
rotateY.from(90deg)
rotateY.from(180deg)
rotateY.from(360deg)
<div data-tor="hover:rotateY.from(10deg)">rotateY.from(10deg)</div>
<div data-tor="hover:rotateY.from(45deg)">rotateY.from(45deg)</div>
<div data-tor="hover:rotateY.from(90deg)">rotateY.from(90deg)</div>
<div data-tor="hover:rotateY.from(180deg)">rotateY.from(180deg)</div>
<div data-tor="hover:rotateY.from(360deg)">rotateY.from(360deg)</div>
rotateY.from(10deg)
rotateY.from(45deg)
rotateY.from(90deg)
rotateY.from(180deg)
rotateY.from(360deg)
<div data-tor="active:rotateY.from(10deg)">rotateY.from(10deg)</div>
<div data-tor="active:rotateY.from(45deg)">rotateY.from(45deg)</div>
<div data-tor="active:rotateY.from(90deg)">rotateY.from(90deg)</div>
<div data-tor="active:rotateY.from(180deg)">rotateY.from(180deg)</div>
<div data-tor="active:rotateY.from(360deg)">rotateY.from(360deg)</div>
rotateY.from(10deg)
rotateY.from(45deg)
rotateY.from(90deg)
rotateY.from(180deg)
rotateY.from(360deg)
<div data-tor="inview:rotateY.from(10deg)">rotateY.from(10deg)</div>
<div data-tor="inview:rotateY.from(45deg)">rotateY.from(45deg)</div>
<div data-tor="inview:rotateY.from(90deg)">rotateY.from(90deg)</div>
<div data-tor="inview:rotateY.from(180deg)">rotateY.from(180deg)</div>
<div data-tor="inview:rotateY.from(360deg)">rotateY.from(360deg)</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(p): - when .inview class is applied on Parent trigger element, because it's visible in the viewport
  • active(p): - when .active class is applied on Parent trigger element
  • show(p): - when .show class is applied on Parent trigger element
  • hover(p): - 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> can be any custom CSS rotation value. Example rotate.to(35deg)

z-axis (default)

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

x-axis

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

y-axis

rotateY.to(10deg)
rotateY.to(45deg)
rotateY.to(90deg)
rotateY.to(180deg)
rotateY.to(360deg)
<div data-tor="hover(p):rotateY.to(10deg)">rotateY.to(10deg)</div>
<div data-tor="hover(p):rotateY.to(45deg)">rotateY.to(45deg)</div>
<div data-tor="hover(p):rotateY.to(90deg)">rotateY.to(90deg)</div>
<div data-tor="hover(p):rotateY.to(180deg)">rotateY.to(180deg)</div>
<div data-tor="hover(p):rotateY.to(360deg)">rotateY.to(360deg)</div>
rotateY.to(10deg)
rotateY.to(45deg)
rotateY.to(90deg)
rotateY.to(180deg)
rotateY.to(360deg)
<div data-tor="active(p):rotateY.to(10deg)">rotateY.to(10deg)</div>
<div data-tor="active(p):rotateY.to(45deg)">rotateY.to(45deg)</div>
<div data-tor="active(p):rotateY.to(90deg)">rotateY.to(90deg)</div>
<div data-tor="active(p):rotateY.to(180deg)">rotateY.to(180deg)</div>
<div data-tor="active(p):rotateY.to(360deg)">rotateY.to(360deg)</div>
rotateY.to(10deg)
rotateY.to(45deg)
rotateY.to(90deg)
rotateY.to(180deg)
rotateY.to(360deg)
<div data-tor="inview(p):rotateY.to(10deg)">rotateY.to(10deg)</div>
<div data-tor="inview(p):rotateY.to(45deg)">rotateY.to(45deg)</div>
<div data-tor="inview(p):rotateY.to(90deg)">rotateY.to(90deg)</div>
<div data-tor="inview(p):rotateY.to(180deg)">rotateY.to(180deg)</div>
<div data-tor="inview(p):rotateY.to(360deg)">rotateY.to(360deg)</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(p): - when .inview class is applied on Parent trigger element, because it's visible in the viewport
  • active(p): - when .active class is applied on Parent trigger element
  • show(p): - when .show class is applied on Parent trigger element
  • hover(p): - 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> can be any custom CSS rotation value. Example rotate.from(35deg)

z-axis (default)

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

x-axis

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

y-axis

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

Flip effect

Making a Bootstrap flip card effect with Torus Kit is really easy. Just add .tor-flip class to the parent wrapper and add it the data-tor="hover:rotateY.to(180deg)" attribute. Then make two child elements with the .tor-flip-front class for the first one, and .tor-flip-back class for the second. Finally add desired content inside these elements.

Here is the starter template for the flip card:

Flip front side

Flip back side

<div class="tor-flip" data-tor="hover:rotateY.to(180deg)">
  <!-- Front side -->
  <div class="tor-flip-front">
    ...
  </div>

  <!-- Back side -->
  <div class="tor-flip-back">
    ...
  </div>
</div>