Transform

• Intro
• Scale
• Translate
• Rotate
• Transform origin

Transform utility classes.

Intro #

The transform utility classes take advantage of CSS custom properties: you can combine multiple transformations by applying multiple classes (i.e., different transform classes won't overwite each other).

[class^="flip"], [class*=" flip"],
[class^="-rotate"], [class*=" -rotate"],
[class^="rotate"], [class*=" rotate"],
[class^="-translate"], [class*=" -translate"],
[class^="translate"], [class*=" translate"],
[class^="-scale"], [class*=" -scale"],
[class^="scale"], [class*=" scale"],
[class^="-skew"], [class*=" -skew"]
[class^="skew"], [class*=" skew"] {
  --translate: 0;
  --rotate: 0;
  --skew: 0;
  --scale: 1;

  transform: translate3d(var(--translate-x, var(--translate)), var(--translate-y, var(--translate)), var(--translate-z, 0)) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) rotateZ(var(--rotate-z, var(--rotate))) skewX(var(--skew-x, var(--skew))) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, var(--scale))) scaleY(var(--scale-y, var(--scale)));
}

To create a new class, update the relative custom property value:

.rotate-45 {
  --rotate: 45deg;
}

.hover\:scale-2:hover {
  --scale: 2;
}

.-translate-y-100\% {
  --translate-y: -100%;
}

Scale #

Scale utility classes:

Translate #

Translate utility classes:

How to center an absolutely positioned element using the position and transform classes:

<!-- how to center element -->
<div class="position-relative">
  <div class="position-absolute top-50% left-50% -translate-50%">
    Centered content!
  </div>
</div>

<!-- how to horizontally center element -->
<div class="position-relative">
  <div class="position-absolute left-50% -translate-x-50%">
    Centered content!
  </div>
</div>

<!-- how to vertically center element -->
<div class="position-relative">
  <div class="position-absolute top-50% -translate-y-50%">
    Centered content!
  </div>
</div>

Rotate #

Rotate utility classes:

Transform origin #

Transform-origin utility classes: