[css3-2d-transforms] transform:matrix() questions

Hey all,

I’ve been trying to work out transform:matrix(), and have been finding
it tough going. For the non-mathematicians in the house, the current
definition of the matrix transformation function is a little opaque:
    “matrix(<number>, <number>, <number>, <number>, <number>,
<number>) specifies a 2D transformation in the form of a
transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent
to applying the transformation matrix [a b c d e f].”
http://www.w3.org/TR/css3-2d-transforms/#transform-functions

While being almost poetic in a zen koan kinda way, this is possibly
not so helpful to anyone not already familiar with transformation
matrices.

Keeping in mind I’m not already familiar with them, it seems to me that:
a = scaleX(sX)
b = skewY(tan(aY))
c = skewX(tan(aX))
d = scaleY(sY)
e = translateX(tX)
f = translateY(tY)

So could
    matrix(<number>, <number>, <number>, <number>, <number>, <number>)
be rewritten as
    matrix(<scaleX(sX)>, <skewY(tan(aY))>, <skewX(tan(aX))>,
<scaleY(sY)>, <translateX(tX)>, <translateY(tY)>)
?
I’d personally find that more useful than number number number… ;)

As to my actual problem, I can’t seem to work out how to reproduce
this series of transforms as a matrix:
    transform: translate(50px, -24px) rotate(180deg) scale(.5) skewY(22.5deg)
http://oli.jp/bugs/browser/matrix-rotate-skew2.html

My problem is the matrix version rotates counter-clockwise. Is this
series of transforms not possible to represent as a matrix, or am I
missing something in the algebra dept? I think we can’t transition
rotations larger than 360° with transform:matrix() — is there anything
else they can’t do?

Thanks for your help!

peace - oli studholme
@boblet

Received on Thursday, 17 February 2011 18:42:51 UTC