Validación HTML: CSS: "transform": Demasiados valores o valores no reconocidos.

Acerca de este problema de CSS

La propiedad CSS transform te permite rotar, escalar, inclinar o trasladar un elemento modificando su espacio de coordenadas. El validador del W3C genera este error cuando el valor asignado a transform no cumple con la sintaxis CSS válida. Esto suele ocurrir cuando:

El nombre de una función de transformación está mal escrito (por ejemplo, rotateZ escrito como rotatez en algunos contextos, o skew escrito como skeew).
Se pasan demasiados argumentos a una función de transformación (por ejemplo, rotate(45deg, 20deg) en lugar de rotate(45deg)).
Los argumentos no tienen las unidades requeridas (por ejemplo, rotate(45) en lugar de rotate(45deg)).
Múltiples funciones de transformación están separadas por comas en lugar de espacios.
Se usa un nombre de función inválido o inexistente (por ejemplo, transform: flip()).
Los valores con prefijo de proveedor como la sintaxis de -webkit-transform se usan incorrectamente en la propiedad estándar transform.

Esto es importante para el cumplimiento de estándares porque los navegadores pueden ignorar silenciosamente una declaración transform inválida por completo, lo que significa que ninguna de tus transformaciones previstas se aplicará. Detectar estos errores durante la validación ayuda a prevenir problemas inesperados de diseño o visualización.

Cada función de transformación tiene una firma específica. Por ejemplo, rotate() acepta exactamente un valor de ángulo, translate() acepta uno o dos valores de longitud/porcentaje, y scale() acepta uno o dos números. Proporcionar el número o tipo incorrecto de argumentos activa este error.

Ejemplos

Incorrecto: Funciones de transformación separadas por comas

Las múltiples transformaciones deben estar separadas por espacios, no por comas.

<div style="transform: rotate(45deg), scale(1.5);">Transformado</div>

Correcto: Funciones de transformación separadas por espacios

<div style="transform: rotate(45deg) scale(1.5);">Transformado</div>

Incorrecto: Unidad faltante en el valor de rotación

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

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

Correcto: Valor de ángulo con unidad

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

Incorrecto: Demasiados argumentos en una función

La función rotate() acepta solo un argumento.

<div style="transform: rotate(45deg, 20deg);">Rotado</div>

Correcto: Argumento único para `rotate()`

Si necesitas rotar alrededor de un eje específico, usa rotateX(), rotateY() o rotateZ() en su lugar.

<div style="transform: rotateZ(45deg);">Rotado en el eje Z</div>

Incorrecto: Función mal escrita o inexistente

<div style="transform: roate(30deg) scaleX(2);">Transformado</div>

Correcto: Nombres de función correctamente escritos

<div style="transform: rotate(30deg) scaleX(2);">Transformado</div>

Incorrecto: Usar `translate` sin unidades en longitudes distintas de cero

<div style="transform: translate(50, 100);">Movido</div>

Correcto: Valores de longitud con unidades

Un valor de 0 no requiere una unidad, pero todos los otros valores de longitud sí.

<div style="transform: translate(50px, 100px);">Movido</div>

Referencia de funciones de transformación válidas

Aquí están las funciones de transformación comúnmente usadas y sus argumentos esperados:

translate(tx) o translate(tx, ty) — longitudes o porcentajes
translateX(tx), translateY(ty), translateZ(tz) — una sola longitud/porcentaje
scale(sx) o scale(sx, sy) — números sin unidades
scaleX(sx), scaleY(sy), scaleZ(sz) — un solo número sin unidades
rotate(angle) — un solo valor de ángulo (por ejemplo, 45deg)
rotateX(angle), rotateY(angle), rotateZ(angle) — un solo ángulo
skew(ax) o skew(ax, ay) — valores de ángulo
skewX(ax), skewY(ay) — un solo ángulo
matrix(a, b, c, d, tx, ty) — exactamente seis números sin unidades
matrix3d(...) — exactamente dieciséis números sin unidades

Al combinar múltiples transformaciones, siempre sepáralas con espacios y verifica el nombre y número de argumentos de cada función contra la especificación.