Why does CSS transform not follow the standard right-hand-rule?

For example, when applying transform: rotateZ(30deg) the element rotates clockwise. Why was it chosen for CSS transform rotation to be clockwise rather than using a standard convention like the right hand rule?

In other words, why was left handedness chosen?

Because rotateZ() is just rotate(), and rotate() used the standard “bearing angle” (clockwise) interpretation of angles that the rest of CSS uses. See linear-gradient(), for example.

I agree that it’s somewhat confusing to have the coordinate system be left-handed, but we had this argument back when I was defining gradients, and settled on bearing angles definitively, as they seem to be more intuitive for the average person (without strong knowledge of 3D transformations).

1 Like