RE: [css3-transform] definition of skewing

Hi Chris,

There are 3 facts in this discussion:
1. with the current state of the spec, you can't create this type of 2D animation without going to a 3D space. Even then, the result looks different.
2. having skewx/y as opposed to rotate(x,y) as part of an animation can introduce unintended behavior where the graphic will either become very large or go to 0.
3. This is a transformation that is used quite often by animators since it's easy to find examples on the web.

Rik

> -----Original Message-----
> From: Chris Marrin [mailto:cmarrin@apple.com]
> Sent: Tuesday, January 25, 2011 9:22 AM
> To: Simon Fraser
> Cc: Rik Cabanier; Alan Gresley; www-style@w3.org
> Subject: Re: [css3-transform] definition of skewing
> 
> 
> On Jan 24, 2011, at 9:28 PM, Simon Fraser wrote:
> 
> >
> > On Jan 24, 2011, at 9:08 PM, Rik Cabanier wrote:
> >
> >>> Why? Because I used generated content? Safari seems to handle it quite
> well.
> >> What I meant is that a 3d transform is conceptually harder than a simple
> rotate.
> >>
> >>> Does the perspective value cause the vanishing points to either come
> >>> closer together or further away from each other or is a new
> >>> perspective point introduced?
> >> I think that authors don't think about this when creating content. They just
> manipulate the graphics so they look what they have in mind.
> >> I might be slightly biased because our products have the rotate(x, y)
> feature and I can see it's being used all the time...
> >> (ie in the attached file, the green animation has this effect
> >> applied.)
> >>
> >>> To demonstrate how your mathematical view is different from my
> visualization view.
> >>> <http://css-class.com/test/css/3/transform-color-cube.htm>
> >> :-)
> >>
> >>> Does example 1a in the below demo meet your requirement? please
> view in Safari.
> >>> <http://css-class.com/test/css/3/transforms-rotate-skew.htm>
> >> It's close, but not quite the same.
> >> I posted an example here:
> >> http://mobiletest.host.adobe.com/csstest/skull.html
> >> The flash rendering is using rotate(x,y) while the html version uses rotate.
> >>
> >> Also, looking at the working draft, rotateX/Y are not listed:
> >> http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090320/
> >
> > rotateX/rotateY are considered 3D transforms:
> > <http://www.w3.org/TR/css3-3d-transforms/>
> 
> But I think his rotate(x,y) function is not the same. The one in the spec
> rotates about the X and Y axes. His function would apply a rotation to the X
> and Y vectors of a 2D matrix. That makes calling it "rotate" too confusing.
> But beyond that, I don't think it's an important enough transformation to
> warrant a function.
> 
> -----
> ~Chris
> cmarrin@apple.com
> 
> 
>

Received on Tuesday, 25 January 2011 18:56:07 UTC