W3C home > Mailing lists > Public > www-style@w3.org > December 2009

Re: [css3-2d-transforms] animation of skewX(), skewY(), skew()

From: Dean Jackson <dino@apple.com>
Date: Thu, 3 Dec 2009 10:45:15 +1100
Cc: www-style@w3.org
Message-Id: <365B62BB-D0CE-479A-B61E-47479316ED02@apple.com>
To: L. David Baron <dbaron@dbaron.org>

On 03/12/2009, at 6:58 AM, L. David Baron wrote:

> http://dev.w3.org/csswg/css3-2d-transforms/#animation says that an
> animation of skewX(), skewY(), or skew() is animation in the space
> of angles.
> 
> In other words, it says that the midpoint (along the transition
> function, not necessarily in terms of time) of an animation between
> skewX(0) and skewX(60deg) is skewX(30deg).
> 
> I think it would make more sense if the animation of these functions
> were in the space of the tangent of the angles (which seems like
> it's a common representation of such transformations, see, e.g.,
> http://en.wikipedia.org/wiki/Shear_mapping ).  In other words, the
> midpoint of the animation between skewX(0) and skewX(60deg) should
> be skewX(40.8934deg), because at this angle any point is transformed
> to a position halfway between where it would be at skewX(0) and
> where it would be at skewX(60deg), since atan(tan(60deg)/2) ==
> 40.8934deg.

Would this make a "linear" animation appear as if it isn't linear (ie. it would look like it slows down or speeds up)? If so, I think it might be confusing.

Suppose you are animating another object with a translation to match the skew end point. With your suggestion it would be extremely hard to have them line up. Bad attempt at ascii art below:


    ********
    ********
   /-------/
  /       /
 /       /
/-------/

Two objects (one is a skewed box, the other is a rectangle of asterisks). I want to animate the skew back to 0degs, and translate the rectangle at the same time.

Dean
Received on Wednesday, 2 December 2009 23:45:51 GMT

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