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

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

From: David Singer <singer@apple.com>
Date: Fri, 18 Feb 2011 11:10:39 +0800
Cc: www-style <www-style@w3.org>
Message-Id: <0F866762-609D-4D4A-8982-332A233E9D97@apple.com>
To: w3-style@boblet.net
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:37 GMT