W3C home > Mailing lists > Public > www-style@w3.org > November 2012

Re: [css3-transforms] Multiplication order

From: Dirk Schulze <dschulze@adobe.com>
Date: Mon, 12 Nov 2012 10:56:21 -0800
To: Boris Zbarsky <bzbarsky@MIT.EDU>
CC: "www-style@w3.org" <www-style@w3.org>
Message-ID: <A14D79E3-7DDF-4D49-B790-7153C1674EB5@adobe.com>

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

	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?

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

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:21 UTC