[css-properties] Improve individual transforms

[1aron]

https://drafts.csswg.org/css-transforms-2/#individual-transforms

translate

The translate property accepts 1-3 values, each specifying a translation against one axis, in the order X, Y, then Z.

Now we have translateX(), translateY(), translateZ(), does that mean we should also have:

• Add translate-x: 16px instead of using translate: 16px
• Add translate-y: 16px instead of using translate: 0px 16px
• Add translate-z: 16px instead of using translate: 0px 0px 16px

Just like inset can be specified by top, left, right, bottom.

scale

The scale property accepts 1-3 values, each specifying a scale along one axis, in order X, Y, then Z.

Now we have scaleX(), scaleY(), scaleZ() does that mean we should also have:

• Add scale-x: 2 instead of using scale: 2 1
• Add scale-y: 2 instead of using scale: 1 2
• Add scale-z: 2 instead of using scale: 1 1 2

rotate

The rotate property accepts an angle to rotate an element, and optionally an axis to rotate it around.

Now we have rotateX(), rotateY(), rotateZ() does that mean we should also have:

• Add rotate-x: 30deg instead of using rotate: x 30deg
• Add rotate-y: 30deg instead of using rotate: y 30deg
• Add rotate-z: 30deg instead of using rotate: z 30deg

In addition, rotate has similar formats to translate and scale, providing the rotate: x 30deg syntax seems inconsistent.

[cdoublev]

See #7646.