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

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

From: Brendan Kenny <bckenny@gmail.com>
Date: Wed, 2 Dec 2009 18:13:08 -0600
Message-ID: <ab96c3ef0912021613k32273597y4722bc96ba6ba972@mail.gmail.com>
To: Dean Jackson <dino@apple.com>
Cc: "L. David Baron" <dbaron@dbaron.org>, www-style@w3.org
On Wed, Dec 2, 2009 at 5:45 PM, Dean Jackson <dino@apple.com> wrote:
> 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

David's proposal would make a non-linear animation appear linear. The
top left corner of your skewed box, for instance, would animate
linearly (with respect to the transition function) from its skewed
position back to 0, matching the rectangle above.

This is probably more useful, but my point above was that this is
typically referred to as a shear, not the skew (specified with an
angle) that the user asked for.
Received on Thursday, 3 December 2009 00:13:41 UTC

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