Re: [css3-transforms] Multiplication order

On Nov 12, 2012, at 9:36 AM, Boris Zbarsky <bzbarsky@MIT.EDU> wrote:

> I would suggest changing step 3 of the above steps to something like this:
> 
> 3.  Multiply on the right by the product of the matrices corresponding 
> to the transform functions in the 'transform' property, in the order 
> they are given.
> 
> or something along those lines.  I _think_ this is correct; I haven't 
> triple checked the left vs right in there.  Might be worth doing that.

This confuses me a bit. But am not sure about which part I am confused. Lets say you have the following transform function list for the transform property:

	transform: translate() rotate() scale()

Each transform function will be transformed to a matrix which would look like

	transform: A B C

where
	A is equivalent to translate()
	B is equivalent to rotate()
	C is equivalent to scale()

The transform origin is 'center'. Therefore, we need to translate before applying the transform function lists. Lets go step by step according to the spec:

1. Start with the identity matrix.
	We create the identical transformation matrix I: T = I.
2. Translate by the computed X, Y and Z values of ‘transform-origin’
	Create a translation matrix and multiply with I: T = I * Trans
3. Multiply by each of the transform functions in ‘transform’ property from left to right
	T = I * Trans * A * B * C
4. Translate by the negated computed X, Y and Z values of ‘transform-origin’
	T = I * Trans * A * B * C * TransBack

T is the local transformation matrix (or just transformation matrix). To get the CTM, you need to accumulate all transformation matrices.

Is the part that confuses you the part with A * B * C? Or how to multiply these transformation matrices to the identical transform with the translation (I * Trans * A * B * C)? Do you disagree with the order in general?

Greetings,
Dirk

Received on Monday, 12 November 2012 18:56:48 UTC