W3C home > Mailing lists > Public > www-style@w3.org > February 2011

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

From: Dean Jackson <dino@apple.com>
Date: Thu, 17 Feb 2011 17:14:50 -0800
Cc: www-style <www-style@w3.org>
Message-Id: <5ABB7DFA-2D1E-4178-AEAA-6269C1C54297@apple.com>
To: w3-style@boblet.net

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?


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.

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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:56 UTC