CSS: “transform”: The types are incompatible.

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

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

Valid example

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

Learn more:

MDN Reference

MDN - transform

→

MDN Reference

MDN - calc()

→

W3C Reference

CSS Values and Units Module Level 4

→