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

• From: Oli Studholme <w3-style@boblet.net>
• Date: Fri, 18 Feb 2011 03:33:34 +0900
• To: www-style <www-style@w3.org>
```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
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?