[css3-2d-transforms] More author-accessible descriptions of transform functions

http://dev.w3.org/csswg/css3-2d-transforms/#transform-functions

Some examples:

   # scale(<number>[, <number>])
   #    specifies a 2D scale operation by the [sx,sy] scaling vector described
   #    by the 2 parameters. If the second parameter is not provided, it is
   #    takes a value equal to the first.

I can guess, given that this is a <number> and not a <percentage>, that
1 == 100% and .5 == 50%, but it'd be nice if there was a conceptual definition
in addition to one about how to construct the "scaling vector".

   # rotate(<angle>)
   #    specifies a 2D rotation by the angle specified in the parameter
   #    about the origin of the element, as defined by the transform-origin
   #    property.

The worst offender imo. The definition of 2D rotation links to the SVG spec,
which hands over a matrix of sin/cos values. Which doesn't tell me, a person
of relatively poor math skills, whether "transform: rotate(90deg)" rotates
clockwise or counter-clockwise. (It's clockwise, but I know because I wrote
a test, not because I deciphered the matrix...)

~fantasai

Received on Thursday, 12 May 2011 00:34:45 UTC