# CSS: “transform”: The types are incompatible.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-transform-the-types-are-incompatible
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A math function inside the `transform` value, such as `calc()`, `min()`, `max()` or `clamp()`, combines values whose types can't be mixed, like a unitless number and an angle.

Every CSS value has a type. `10px` and `2em` are lengths, `45deg` and `0.5turn` are angles, `2s` is a time, and `90` with no unit is a plain number. When `calc()` adds or subtracts, both sides must have the same type, so `calc(90deg - 45deg)` is a valid angle while `calc(90 - 45deg)` asks the browser to subtract an angle from a number. The arguments of `min()`, `max()` and `clamp()` follow the same rule: `min(50px, 10deg)` can't compare a length with an angle.

The usual cause is a missing unit on one of the numbers, or a value copied from another function, such as a length pasted into `rotate()`. Multiplication and division work differently, because one side may be a plain number that scales the other. To turn a unitless number into an angle or a length, multiply it by one unit, as in `calc(90 * 1deg - 45deg)`.

Browsers treat a `transform` declaration with a mistyped expression as invalid and ignore it. That includes the functions in the same list that were written correctly, so the element isn't transformed at all.

## Invalid example

```html
<div style="transform: rotate(calc(90 - 45deg));">Tilted label</div>
<div style="transform: translateX(min(50px, 10deg));">Sliding panel</div>
```

## Valid example

```html
<div style="transform: rotate(calc(90deg - 45deg));">Tilted label</div>
<div style="transform: translateX(min(50px, 10vw));">Sliding panel</div>
```