Validación HTML: CSS: "transform": X no es un valor de "transform".

Acerca de este problema de CSS

La propiedad CSS transform te permite rotar, escalar, sesgar o trasladar un elemento modificando su espacio de coordenadas. El validador verifica la corrección del CSS en línea y embebido, y marcará cualquier valor que no reconozca como un valor transform válido. Los errores comunes incluyen:

Unidades faltantes en ángulos o longitudes (ej., rotate(45) en lugar de rotate(45deg))
Errores tipográficos en nombres de funciones (ej., rotatee(10deg) o tranlate(10px))
Tipos de valor incorrectos (ej., usar un color o un número simple donde se espera una función)
Comas o paréntesis faltantes en argumentos de funciones
Usar funciones no existentes (ej., flip(180deg) no es una función transform válida)
Número incorrecto de argumentos (ej., matrix() requiere exactamente 6 valores)

Esto importa para el cumplimiento de estándares y renderizado predecible. Aunque los navegadores pueden ignorar silenciosamente valores transform inválidos, el elemento simplemente no se transformará — lo que puede llevar a errores de diseño sutiles que son difíciles de rastrear. Detectar estos errores en el momento de validación te ayuda a solucionarlos antes de que lleguen a los usuarios.

Ejemplos

Inválido: unidad de ángulo faltante

La función rotate() requiere un valor con una unidad de ángulo como deg, rad, turn, o grad.

<div style="transform: rotate(45);">Texto rotado</div>

Solucionado: agregando la unidad de ángulo

<div style="transform: rotate(45deg);">Texto rotado</div>

Inválido: error tipográfico en el nombre de la función

<div style="transform: tranlateX(10px);">Texto desplazado</div>

Solucionado: corrigiendo el nombre de la función

<div style="transform: translateX(10px);">Texto desplazado</div>

Inválido: usando un valor que no es transform

Un número simple o palabra clave no relacionada no es un valor transform válido.

<div style="transform: 200px;">Contenido</div>

Solucionado: usando una función transform apropiada

<div style="transform: translateX(200px);">Contenido</div>

Inválido: número incorrecto de argumentos para `matrix()`

La función matrix() requiere exactamente seis números separados por comas.

<div style="transform: matrix(1, 2, 3);">Contenido</div>

Solucionado: proporcionando los seis argumentos

<div style="transform: matrix(1, 0, 0, 1, 0, 0);">Contenido</div>

Referencia de valores transform válidos

Aquí tienes un resumen de todas las funciones transform válidas y los valores de palabra clave/globales:

<style>
  /* Valor de palabra clave */
  .no-transform { transform: none; }

  /* Funciones de traslación */
  .move-a { transform: translate(12px, 50%); }
  .move-b { transform: translateX(2em); }
  .move-c { transform: translateY(3in); }
  .move-d { transform: translateZ(2px); }
  .move-e { transform: translate3d(12px, 50%, 3em); }

  /* Funciones de rotación */
  .spin-a { transform: rotate(0.5turn); }
  .spin-b { transform: rotateX(10deg); }
  .spin-c { transform: rotateY(10deg); }
  .spin-d { transform: rotateZ(10deg); }
  .spin-e { transform: rotate3d(1, 2, 3, 10deg); }

  /* Funciones de escala */
  .grow-a { transform: scale(2, 0.5); }
  .grow-b { transform: scaleX(2); }
  .grow-c { transform: scaleY(0.5); }
  .grow-d { transform: scaleZ(0.3); }
  .grow-e { transform: scale3d(2.5, 1.2, 0.3); }

  /* Funciones de sesgo */
  .lean-a { transform: skew(30deg, 20deg); }
  .lean-b { transform: skewX(30deg); }
  .lean-c { transform: skewY(1.07rad); }

  /* Otras funciones */
  .depth { transform: perspective(500px); }
  .matrix-2d { transform: matrix(1, 0, 0, 1, 0, 0); }
  .matrix-3d { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }

  /* Múltiples funciones encadenadas juntas */
  .combo { transform: translateX(10px) rotate(10deg) translateY(5px); }
</style>

Al solucionar este error, observa el valor específico que el validador reporta como inválido. Compáralo contra las funciones válidas listadas arriba, verifica la ortografía, asegúrate de que todos los argumentos tengan unidades correctas, y verifica que los paréntesis y comas estén colocados apropiadamente.