[css-transforms-2] Add x/y/z keywords to rotate, and allow axis/angle to be specified in either order. Elaborate on when it's a 2d vs 3d transform officially, and add a note making it clearer.

Author: tabatkins

css-transforms-2/Overview.bs

@@ -559,7 +559,7 @@ Unspecified translations default to ''0px''.
 
 <pre class="propdef">
 Name: rotate
-Value: none | <<number>>{3}? <<angle>>
+Value: none | [ x | y | z | <<number>>{3} ]? && <<angle>>
 Initial: none
 Applies to: <a>transformable elements</a>
 Inherited: no
@@ -568,11 +568,26 @@ Animatable: as SLERP
 </pre>
 
 The 'rotate' property accepts an angle to rotate an element,
-and optionally an axis to rotate it around,
-specified as the X, Y, and Z lengths of an origin-anchored vector.
-If the axis is unspecified,
-it defaults to ''0 0 1'',
-causing a "2d rotation" in the plane of the screen.
+and optionally an axis to rotate it around.
+
+If the axis is omitted, this specifies a 2d rotation,
+equivalent to the ''rotate()'' function.
+
+Otherwise, it specifies a 3d rotation:
+if <dfn value for=rotate>x</dfn>,
+<dfn value for=rotate>y</dfn>,
+or <dfn value for=rotate>z</dfn> is given,
+it specifies a rotation around that axis,
+equivalent to the ''rotateX()''/etc 3d transform functions.
+Alternately, the axis can be specified explicitly
+by giving three numbers
+representing the x, y, and z components of an origin-centered vector,
+equivalent to the ''rotate3d()'' function.
+
+Note: While ''rotate: 30deg;'' and ''rotate: z 30deg;'' technically specify the same rotation,
+the first declaration is a 2d transform equivalent to ''transform: rotate(30deg);'',
+while the second is a 3d transform equivalent to ''transform: rotateZ(30deg);'',
+which can have additional side-effects in UAs.
 
 <pre class="propdef">
 Name: scale