- 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 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