← Voltar à lista de classes

Composição via custom properties

As classes de transform são baseadas em custom properties: você pode combinar várias transformações aplicando múltiplas classes ao mesmo elemento — elas não se sobrescrevem porque cada uma ajusta apenas uma variável.

[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)));
}

Para criar uma classe nova, atualize a custom property correspondente:

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

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

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

Scale

Translate

Padrão para centralizar um elemento posicionado absolutamente combinando position e transform:

<!-- centralizar o elemento -->
<div class="position-relative">
  <div class="position-absolute top-50% left-50% -translate-50%">
    Conteúdo centralizado!
  </div>
</div>

<!-- centralizar horizontalmente -->
<div class="position-relative">
  <div class="position-absolute left-50% -translate-x-50%">
    Conteúdo centralizado!
  </div>
</div>

<!-- centralizar verticalmente -->
<div class="position-relative">
  <div class="position-absolute top-50% -translate-y-50%">
    Conteúdo centralizado!
  </div>
</div>

Rotate

Transform origin