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).
Interesting. Can you expand on that bit? How are the bearing angles more intuitive? I mean, what would the thought process be for a new user who hasn’t taken any math or programming before?
EDIT: I just asked a designer to rotate a piece of paper 10 degrees, and they went clockwise. I asked why, and they said because it’s conventional in the programs they use, and usually things go clockwise unless stated counter-clockwise. I’ll ask some more people, namely people who aren’t coders or even designers…
You basically got it. Most people intuitive exposure to rotation is clock faces; they consider “0deg” to be straight forward, and CW rotation to be “normal” (and thus positive). This might also be related to left-to-right languages; you might get a more diverse set of answers from people who speak an Arabic language.
The alternative view (polar angles) comes from people with a strong math/geometry background, which is a minority. I went that way with the gradients spec at first, but the WG ended up going for bearing angles, for the reasons stated.