🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Transform

Transform utility classes.


🔍 On this page:

  1. Intro
  2. Scale
  3. Translate
  4. Rotate
  5. Transform Origin

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:

Class Description
.flip --scale: -1; → flip element horizontally and vertically
.flip-x --scale-x: -1; → flip element horizontally
.flip-y --scale-y: -1; → flip element vertically

Translate #

Translate utility classes:

Class Description
.-translate-50% --translate: -50%;
.-translate-x-50% --translate-x: -50%;
.-translate-y-50% --translate-y: -50%;
.translate-50% --translate: 50%;
.translate-x-50% --translate-x: 50%;
.translate-y-50% --translate-y: 50%;

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:

Class Description
.rotate-90 --rotate: 90deg;
.rotate-180 --rotate: 180deg;
.rotate-270 --rotate: 270deg;

Transform Origin #

Transform-origin utility classes:

Class Description
.origin-center set transform-origin in the center
.origin-top set transform-origin in the top center
.origin-right set transform-origin in the center right
.origin-bottom set transform-origin in the bottom center
.origin-left set transform-origin in the center left
.origin-top-left set transform-origin in the top left
.origin-top-right set transform-origin in the top right
.origin-bottom-left set transform-origin in the bottom left
.origin-bottom-right set transform-origin in the bottom right

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us