[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].Ē

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

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)

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

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