[css-transforms-2] Syntax of "rotate" judged unintuitive (and not interoperable anyway)

[FremyCompany]

It seems Chrome doesn't support the syntax of rotate: 0 0 1 45deg. Interestingly, Edge does not either but supports rotate: 45deg 0 0 1 instead.

Discussing with devs on Twitter, devs thought the current syntax is not clear:

• what are those three numbers?
• can you put the angle between them?
• are they related in any way?

Maybe we should change the syntax to make the grouping clearer, and also allow to reorder. An idea would be rotate: 45deg axis(0 0 1).

Thoughts?

[fantasai]

Alternately, have longhands rotate-axis and rotate-angle and then it's more obvious?

[fantasai]

Then you have rotate: <'rotate-axis'> || <'rotate-angle'>

[FremyCompany]

I like it

[ewilligers]

It seems Chrome doesn't support the syntax of rotate: 0 0 1 45deg

This was fixed.

Web platform tests show the currently valid and invalid syntax.

I don't think having two properties and a shorthand is justified. Fremy's example could be achieved with
Value: none | <angle> && [ axis(<number>{3}) ]?

[AmeliaBR]

Hmmm... this issue overlaps with #2130, which is also discussing the syntax of the rotate property.

As I mentioned over there, I think that the order of angle vs axis should be flexible, so long as unitless 0 is not allowed for the angle (as agreed in #2116).

I personally don't think the function notation is necessary for grouping the axis vector values, but I don't have a problem with it. It is neater than any other solution.

Splitting the property into longhands is probably something that could wait until we have more real-world feedback. It might turn out that what authors really want are separate rotate-x, rotate-y, rotate-z properties, or something like that.

[tabatkins]

"I don't know what these three numbers do" seems weird, given the existence of rotate3d(), whose arguments are also an angle and three numbers. The only difference in syntax between the property and the function is whether the items are comma-separated or space-separated.

Maybe just nobody uses rotated3d() in practice, at least by hand?

[dbaron]

This issue should be addressed by the discussion the WG just had, recorded in #2130.

[tabatkins]

Yup, thus closing.