Propiedades de transformación individuales

La propiedad transform te permite aplicar varias transformaciones en un orden específico, pero cualquier cambio en una sola transformación requiere volver a especificar toda la cadena de transformaciones. Esto dificulta la animación o la transición de una sola transformación.

Las propiedades de transformación de CSS individuales (translate, rotate y scale) te permiten aplicar transformaciones de forma independiente de la propiedad transform. Este enfoque facilita la anulación de una sola transformación, por ejemplo, en :hover.

Detalles clave de la implementación

Las propiedades de transformación individuales siempre se aplican en un orden fijo, independientemente de su orden en el CSS:

1. translate
2. rotate
3. scale
4. transform (se aplica al final)

Si necesitas un orden diferente (p.ej., escalar antes de rotar), debes seguir usando las funciones de la propiedad transform.

Las funciones de transformación no anulan las propiedades de transformación individuales. En otras palabras, scale: 2; transform: scale(3); primero se escalará 2 veces y, luego, 3 veces, para un total de 6 veces.

Cómo evitar cambios inesperados en los contextos de apilamiento y los bloques contenedores

La propiedad transform y las propiedades de transformación individuales afectan el diseño y la renderización de la página, y pueden causar un comportamiento inesperado con el índice z o el posicionamiento de anclaje. OBLIGATORIO: Si un elemento puede tener una transformación aplicada como parte de un cambio de estado, como :hover, o una transición o animación, aplica una transformación de identidad al elemento base. Esto garantiza que el contexto de apilamiento y la contención del elemento no cambien cuando se aplique una transformación.

.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;
}

Animaciones y transiciones independientes

El beneficio principal es la capacidad de definir animaciones o transiciones superpuestas que se orienten a diferentes propiedades sin conflictos.

.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; }
}

Estrategias de resguardo

Para los navegadores que no admiten propiedades de transformación individuales, usa la propiedad transform tradicional. Ten en cuenta que esto requiere volver a declarar toda la pila de transformaciones si quieres modificar una parte en un 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;
  }
}