Propriedades de transformação individuais

A propriedade transform permite aplicar várias transformações em uma ordem especificada, mas qualquer mudança em uma única transformação exige que toda a cadeia de transformações seja especificada novamente. Isso dificulta a animação ou a transição de uma única transformação.

As propriedades de transformação CSS individuais (translate, rotate e scale) permitem aplicar transformações de forma independente da propriedade transform. Essa abordagem simplifica a substituição de uma única transformação, por exemplo, em :hover.

Principais detalhes da implementação

As propriedades de transformação individuais são sempre aplicadas em uma ordem fixa, independente da ordem no CSS:

1. translate
2. rotate
3. scale
4. transform (aplicado por último)

Se você precisar de uma ordem diferente (por exemplo, dimensionar antes de girar), continue usando as funções de propriedade transform.

As funções de transformação não substituem as propriedades de transformação individuais. Em outras palavras, scale: 2; transform: scale(3); primeiro vai escalonar em 2x e depois em 3x, totalizando 6x.

Como evitar mudanças inesperadas em contextos de empilhamento e blocos de contenção

A propriedade transform e as propriedades de transformação individuais afetam o layout e a renderização da página e podem causar um comportamento inesperado com o z-index ou o posicionamento de âncora. OBRIGATÓRIO: se um elemento puder ter uma transformação aplicada como parte de uma mudança de estado, como :hover, ou uma transição ou animação, aplique uma transformação de identidade ao elemento de base. Isso garante que o contexto de empilhamento e a contenção do elemento não mudem quando uma transformação é aplicada.

.element{
  /* MANDATORY: Apply identity transformations for properties that will
     change on state changes (like :hover). This prevents unexpected layout
     or z-index shifts caused by creating a new stacking context only on hover. */
  translate: 0px;
  rotate: 0deg;
  scale: 1;
}
.element:hover{
  translate: 10px 10px;
  rotate: 20deg;
  scale: 0.8;
}

Animações e transições independentes

O principal benefício é a capacidade de definir animações ou transições sobrepostas que visam propriedades diferentes sem conflito.

.card {
  /* Define independent animations that don't overwrite each other */
  animation: float 3s infinite ease-in-out;
  
  /* Transition only the scale property for hover states */
  transition: scale 0.3s ease;

  /* Establish the base scale to prevent a sudden stacking context shift when transitioning on hover. */
  scale: 1;
}

.card:hover {
  /* Only the scale changes; the 'float' animation (translate) continues uninterrupted */
  scale: 1.05;
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

Estratégias de fallback

Para navegadores que não são compatíveis com propriedades de transformação individuais, use a propriedade transform tradicional. Isso exige que você declare novamente toda a pilha de transformações se quiser modificar uma parte em um estado diferente.

.element {
  /* Base transform */
  transform: translate(100px, 0) rotate(45deg);
  /* Specify the identity for the scale property. */
  scale: 1;
}

@supports not (translate: 0px) {
  .element:hover {
    /* Fallback: Must repeat translate and rotate even if only scale changes */
    transform: translate(100px, 0) rotate(45deg) scale(1.1);
  }
}

@supports (translate: 0px) {
  .element:hover {
    /* Modern: Only declare the change */
    scale: 1.1;
  }
}