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

I think it's more likely that we should have the equation (maybe we already do) that the point (x, y) is transformed into (x', y') by multiplying the vector (x, y, 1) with the matrix, i.e.

x' = ax + by + c
y' = dx + ey + f

(if I have the order right, and if I don't, it's even more of a suggestion we should document it...)

On Feb 18, 2011, at 2:33 , Oli Studholme wrote:

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

David Singer
Multimedia and Software Standards, Apple Inc.

Received on Friday, 18 February 2011 03:11:16 UTC