Validación HTML: CSS: “transform”: Too many values or values are not recognized.

Acerca de este problema de CSS

The transform CSS property lets you rotate, scale, skew, or translate an element by modifying its coordinate space. The W3C validator raises this error when the value assigned to transform doesn’t conform to valid CSS syntax. This typically happens when:

A transform function name is misspelled (e.g., rotateZ typed as rotatez in some contexts, or skew typed as skeew).
Too many arguments are passed to a transform function (e.g., rotate(45deg, 20deg) instead of rotate(45deg)).
Arguments are missing required units (e.g., rotate(45) instead of rotate(45deg)).
Multiple transform functions are separated by commas instead of spaces.
An invalid or non-existent function name is used (e.g., transform: flip()).
Vendor-prefixed values like -webkit-transform syntax are used in the standard transform property incorrectly.

This matters for standards compliance because browsers may silently ignore an invalid transform declaration entirely, meaning none of your intended transformations will be applied. Catching these errors during validation helps prevent unexpected layout or visual issues.

Each transform function has a specific signature. For example, rotate() accepts exactly one angle value, translate() accepts one or two length/percentage values, and scale() accepts one or two numbers. Providing the wrong number or type of arguments triggers this error.

Examples

Incorrect: Comma-separated transform functions

Multiple transforms must be space-separated, not comma-separated.

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

Correct: Space-separated transform functions

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

Incorrect: Missing unit on rotation value

The rotate() function requires an angle unit such as deg, rad, grad, or turn.

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

Correct: Angle value with unit

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

Incorrect: Too many arguments in a function

The rotate() function accepts only one argument.

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

Correct: Single argument for `rotate()`

If you need to rotate around a specific axis, use rotateX(), rotateY(), or rotateZ() instead.

<div style="transform: rotateZ(45deg);">Rotated on Z axis</div>

Incorrect: Misspelled or non-existent function

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

Correct: Properly spelled function names

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

Incorrect: Using `translate` without units on non-zero lengths

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

Correct: Length values with units

A value of 0 does not require a unit, but all other length values do.

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

Valid Transform Functions Reference

Here are the commonly used transform functions and their expected arguments:

translate(tx) or translate(tx, ty) — lengths or percentages
translateX(tx), translateY(ty), translateZ(tz) — a single length/percentage
scale(sx) or scale(sx, sy) — unitless numbers
scaleX(sx), scaleY(sy), scaleZ(sz) — a single unitless number
rotate(angle) — a single angle value (e.g., 45deg)
rotateX(angle), rotateY(angle), rotateZ(angle) — a single angle
skew(ax) or skew(ax, ay) — angle values
skewX(ax), skewY(ay) — a single angle
matrix(a, b, c, d, tx, ty) — exactly six unitless numbers
matrix3d(...) — exactly sixteen unitless numbers