Flip

Utilities for flipping an element on all three axis.

Class	Properties
flip-x	transform: rotateY(180deg) rotateZ(180deg);
flip-y	transform: rotateX(180deg) rotateZ(180deg);
flip-z	transform: rotateX(180deg) rotateY(180deg);

Note that the css generated is implemented as a combination of two rotation transforms. For instance,

.flip-x {
       transform: rotateY(180deg) rotateZ(180deg);
}

Basic Usage

Use flip-x, flip-y or flip-z classes to flip an element around the targeted axis.

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 flip-x, use transform flip-x.
Read more on this here.

<div>
       <div class="flip-x">This is flipped on X axis</div>
       <div class="flip-y">This one is flipped on y axis</div>
</div>

No Transforms

transform flip-y

transform flip-x

transform flip-z

Attribute: Photo by Štefan Štefančík on Unsplash

Flipping an image around different axes

<div class="flex gap-5">
  <div class="mb-10">
    <div class="font-bold text-lg mb-5 text-center">No Transforms</div>
    <div class="w-52 rounded-xl shadow-xl overflow-hidden flex mx-auto">
      <img class="object-cover" src="/img/stefan-stefancik-Ue2-23uBwNw-unsplash.jpg" />
    </div>
  </div>
  <div class="mb-10">
    <div class="font-bold text-lg mb-5 text-center">transform flip-y</div>
    <div class="w-52 rounded-xl shadow-xl overflow-hidden flex mx-auto">
      <img class="transform flip-y object-cover" src="/img/stefan-stefancik-Ue2-23uBwNw-unsplash.jpg" />
    </div>
  </div>
  <div class="mb-10">
    <div class="font-bold text-lg mb-5 text-center">transform flip-x</div>
    <div class="w-52 rounded-xl shadow-xl overflow-hidden flex mx-auto">
      <img class="transform flip-x object-cover" src="/img/stefan-stefancik-Ue2-23uBwNw-unsplash.jpg" />
    </div>
  </div>
  <div class="mb-10">
    <div class="font-bold text-lg mb-5 text-center">transform flip-z</div>
    <div class="w-52 rounded-xl shadow-xl overflow-hidden flex mx-auto">
      <img class="transform flip-z object-cover" src="/img/stefan-stefancik-Ue2-23uBwNw-unsplash.jpg" />
    </div>
  </div>
</div>

Read More

info

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