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

On Feb 17, 2011, at 10:33 AM, 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)>)

No, because you've left rotation out, and a transform can include multiple instances of the same transformation function. eg. transform: scale(10) rotate(5deg) scale(0.1) rotate(-5deg)

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

The resulting transformation can always be represented by a single matrix. In fact, that's what the implementations do under the hood to produce a resulting coordinate system. However, when you're animating between two transforms you can't always simplify to a matrix. For example rotate(360deg) -> rotate(0deg). They are the same matrix which would mean no transition, but clearly something should happen.

Your test case demonstrates this perfectly. Once you simplify rotate(180deg) into matrix form, it's equivalent to rotate(-180deg) in matrix form. The matrix interpolation doesn't know which direction you intended to move when going towards rotate(0deg). In these cases you should stick with the longhand form.


> I think we can’t transition
> rotations larger than 360° with transform:matrix() — is there anything
> else they can’t do?

Exactly.

It's not just rotations > 360 though. Anytime you're interpolating the matrix simplification of a list of transforms you're risking a different behaviour.

Dean

Received on Friday, 18 February 2011 01:15:24 UTC