# CSS: “transform”: Too many values or values are not recognized.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-transform-too-many-values-or-values-are-not-recognized
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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.

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

### Correct: Space-separated transform functions

```html
<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`.

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

### Correct: Angle value with unit

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

### Incorrect: Too many arguments in a function

The `rotate()` function accepts only one argument.

```html
<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.

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

### Incorrect: Misspelled or non-existent function

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

### Correct: Properly spelled function names

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

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

```html
<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.

```html
<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

When combining multiple transforms, always separate them with spaces and verify each function's name and argument count against the specification.