Transformations

go.raybo.org/2cEq

Tailwind lets you create certain transformations using a number of tags.

Transform

transform transform-gpu transform-none

Docs Try it

There are three main transformation classes. It sets up the element so that it can be transform and acts as a reset for all of the transformation properties like translate, rotate, skew and scale.

The transform class is the base class and there's an optional class that tries to use the GPU or Graphical User Processor if it's available. That can yield faster animations.

The last class will ignore transforms if they exist.

Rotate

  • (-)rotate(-DEG)
    • AMT

      0 1 2 3 6
      12 45 90 180

Docs Try it

Since we already looked at rotation, let's take a look at the options there. You can rotate on 9 different angles. Rotation happens clockwise by default, but you can add a negative sign at the beginning so that it goes counter clockwise.

Scale

  • scale(-DIR)(-SIZ)
    • DIR

      x y
    • SIZ

      0 50 75 90 95 100

      105 110 125 150

Docs Try it

Scaling will allow you to resize elements. You can scale horizontally (in the x direction), vertically or both.

There's really just a handful of sizes here and honestly, they seem inadequate.

Skew

  • (-)skew(-DIR)(-DEG)
    • DIR

      x y
    • DEG

      0 1 2 3 6 12

Docs Try it

Another transformation you can perform is a skew that takes in an angle, direction and can optionally take in a negative value.

Translate

  • (-)translate(-DIR)(-AMT)
    • DIR

      x y
    • AMT

      0 0.5 1 1.5 2 2.5 3 3.5 4 5 6

      7 8 9 10 11 12 14 16 20 24 28 32

      36 40 44 48 52 56 60 64 72 80 96

      1/2 1/3 2/3 1/4 2/4 3/4 px full

Docs Try it

Translating means moving the object in a certain direction from it's origin. You can go in the x or y direction and also move in a negative direction with a full compliment of amounts from 0 to 96, fractions, px which is one pixel and full which is the full width.

Transform Origin

  • origin(-DIR)
    • DIR

      center top top-right
      right bottom-right bottom
      bottom-left left top-left

Docs Try it

These classes will let you set the origin for transformations. The names are pretty self explanatory.