Rotate

Utilities for rotating an element on all three axis.

Class	Properties
rotate-x-0	transform: rotateX(0deg);
rotate-y-0	transform: rotateY(0deg);
rotate-z-0	transform: rotateZ(0deg);
rotate-x-1	transform: rotateX(1deg);
rotate-y-1	transform: rotateY(1deg);
rotate-z-1	transform: rotateZ(1deg);
rotate-x-2	transform: rotateX(2deg);
rotate-y-2	transform: rotateY(2deg);
rotate-z-2	transform: rotateZ(2deg);
rotate-x-3	transform: rotateX(3deg);
rotate-y-3	transform: rotateY(3deg);
rotate-z-3	transform: rotateZ(3deg);
rotate-x-6	transform: rotateX(6deg);
rotate-y-6	transform: rotateY(6deg);
rotate-z-6	transform: rotateZ(6deg);
rotate-x-12	transform: rotateX(12deg);
rotate-y-12	transform: rotateY(12deg);
rotate-z-12	transform: rotateZ(12deg);
rotate-x-30	transform: rotateX(30deg);
rotate-y-30	transform: rotateY(30deg);
rotate-z-30	transform: rotateZ(30deg);
rotate-x-45	transform: rotateX(45deg);
rotate-y-45	transform: rotateY(45deg);
rotate-z-45	transform: rotateZ(45deg);
rotate-x-60	transform: rotateX(60deg);
rotate-y-60	transform: rotateY(60deg);
rotate-z-60	transform: rotateZ(60deg);
rotate-x-90	transform: rotateX(90deg);
rotate-y-90	transform: rotateY(90deg);
rotate-z-90	transform: rotateZ(90deg);
rotate-x-135	transform: rotateX(135deg);
rotate-y-135	transform: rotateY(135deg);
rotate-z-135	transform: rotateZ(135deg);
rotate-x-180	transform: rotateX(180deg);
rotate-y-180	transform: rotateY(180deg);
rotate-z-180	transform: rotateZ(180deg);
rotate-x-270	transform: rotateX(270deg);
rotate-y-270	transform: rotateY(270deg);
rotate-z-270	transform: rotateZ(270deg);
rotate-3d-[1,0,1,30deg]	transform: rotate3d(1,0,1,30deg);

Basic Usage

Rotation classes are used to rotate an element relative to an axis. The rotation axis is determined by the value of transform-origin class applied which is set center as default. Also you need to add perspective class to the parent of the element that you transform to get the 3d look. The syntax for above classes is rotation-[axis]-[angle]. Hover on below example to see it in action.

Remember to add transform class

Plugin requires you to add transform class along with other transform classes to apply the effect.
For example, instead of rotate-x-45, use transform rotate-x-45.
Read more on this here.

Rotate Around Y

transform hover:rotate-y-60

Rotate Around X

transform hover:rotate-x-45

Rotate Around Z

transform hover:rotate-z-30

Using rotation classes for cards (Above cards use hover on desktop: to apply rotation on hover on desktop. We exclude it for simplicity). In mobile view, transitions will be applied regardless of hover.

<div class="flex">
  <div class="perspective-800">
    <div class="transform rotate-y-30">
      <!--...-->
    </div>
  </div>
  <div class="perspective-800">
    <div class="transform rotate-x-45">
      <!--...-->
    </div>
  </div>
  <div class="perspective-800">
    <div class="transform rotate-z-30">
      <!--...-->
    </div>
  </div>
</div>

Here in this card example, we use multiple perspective containers. Instead, you can add perspective to the flex container above and make cards direct children of flex container also. But then the same perspective will effect all three cards. Here we provide separate perspective containers to each card. This choice depends on your requirements and goals.

Using rotate-3d class

It certain situation, you might need to directly leverage functionality of rotate-3d transform function. For this, we have provided rotate-3d class which you can use freely to specify the value you need and achieve the full control over rotate-3d function.

For instance, to implement following css,

  .some-class {
    transform: rotate-3d(1,1,0,20deg);
  }

you can use rotate-3d class as follows,

<div class="rotate-3d-[1,1,0,20deg]">content...</div>

This class is does not support theme defaults. Instead, it works only with arbitrary values provided in the correct format.

Customizing Your Theme

We extend the default theme by adding additional values for rotate key. You can add any custom values from tailwind.config.js file.

module.exports = {
  theme: {
    extend: {
      rotate: {
        '20': '20deg',
      }
    }
  }
}

Arbitrary Values

If you need to use an custom value for rotation, you can use the following syntax.

<div class="rotate-y-[20deg]">
  <!-- More Items -->
</div>

Learn more about arbitrary value support in the tailwindcss arbitrary values documentation.

Read More

To learn more about rotate css transform refer here.

info

You can use modifiers such as md:rotate-x-60 to target media queries, hover, active... etc. You can read about modifiers here.