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 11:15:08 +1100
Cc: "L. David Baron" <dbaron@dbaron.org>, www-style@w3.org
Message-Id: <4BA03F34-39FB-47CF-A3E8-20D0FCBD3457@apple.com>
To: Brendan Kenny <bckenny@gmail.com>
> 
> 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.

Here's a testcase that shows what I mean in WebKit.

[[[

<style>

div {
background-color: red;
position: relative;
width: 100px;
height: 100px;
}

#a {
-webkit-animation: move1 2s infinite linear alternate;
}

#b {
background-color:blue;
-webkit-animation: move2 2s infinite linear alternate;
-webkit-transform-origin: bottom left;
}

@-webkit-keyframes move1 {
from { -webkit-transform: translateX(100px); }
to { -webkit-transform: translateX(0); }
}

@-webkit-keyframes move2 {
from { -webkit-transform: skewX(-45deg); }
to { -webkit-transform: skewX(0); }
}

</style>

<div id=a></div>
<div id=b></div>

]]]





> 
> 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:15:50 GMT

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