# CSS: “transform”: X is not a “transform” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-transform-x-is-not-a-transform-value
> 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 validator checks inline and embedded CSS for correctness, and it will flag any value it doesn't recognize as a valid `transform` value. Common mistakes include:

- **Missing units** on angles or lengths (e.g., `rotate(45)` instead of `rotate(45deg)`)
- **Typos in function names** (e.g., `rotatee(10deg)` or `tranlate(10px)`)
- **Wrong value types** (e.g., using a color or a plain number where a function is expected)
- **Missing commas or parentheses** in function arguments
- **Using non-existent functions** (e.g., `flip(180deg)` is not a valid transform function)
- **Incorrect number of arguments** (e.g., `matrix()` requires exactly 6 values)

This matters for standards compliance and predictable rendering. While browsers may silently ignore invalid `transform` values, the element simply won't be transformed — which can lead to subtle layout bugs that are hard to track down. Catching these errors at validation time helps you fix them before they reach users.

## Examples

### Invalid: missing angle unit

The `rotate()` function requires a value with an angle unit like `deg`, `rad`, `turn`, or `grad`.

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

### Fixed: adding the angle unit

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

### Invalid: typo in function name

```html
<div style="transform: tranlateX(10px);">Shifted text</div>
```

### Fixed: correcting the function name

```html
<div style="transform: translateX(10px);">Shifted text</div>
```

### Invalid: using a non-transform value

A plain number or unrelated keyword is not a valid `transform` value.

```html
<div style="transform: 200px;">Content</div>
```

### Fixed: using a proper transform function

```html
<div style="transform: translateX(200px);">Content</div>
```

### Invalid: wrong number of arguments for `matrix()`

The `matrix()` function requires exactly six comma-separated numbers.

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

### Fixed: providing all six arguments

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

### Valid transform values reference

Here is a summary of all valid `transform` functions and the keyword/global values:

```html
<style>
  /* Keyword value */
  .no-transform { transform: none; }

  /* Translate functions */
  .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); }

  /* Rotate functions */
  .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); }

  /* Scale functions */
  .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); }

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

  /* Other functions */
  .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); }

  /* Multiple functions chained together */
  .combo { transform: translateX(10px) rotate(10deg) translateY(5px); }
</style>
```

When troubleshooting this error, look at the specific value the validator reports as invalid. Compare it against the valid functions listed above, double-check spelling, ensure all arguments have correct units, and verify that parentheses and commas are properly placed.