RE: [css3-transform] definition of skewing

Hi Alan,

Sorry that I didn't reply sooner.
Your samples do look a lot like the sample I gave you. (There's some jitter in the animation in safari, maybe if you combine the animations it will go away.)
However, it does require quite a bit of CSS to make this simple transformation work.

I will forward your email to someone on our team with more experience in this area so he can work out if the math is the same. What we want is for the transformations to look identical and animate of time the same.
Once I have more info, one of us will follow up on the list.

Rik
> -----Original Message-----
> From: Alan Gresley [mailto:alan@css-class.com]
> Sent: Tuesday, January 25, 2011 6:38 AM
> To: Rik Cabanier
> Cc: Simon Fraser; Chris Marrin; www-style@w3.org
> Subject: Re: [css3-transform] definition of skewing
> 
> On 25/01/2011 4: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.
> 
> 
> Agree.
> 
> 
> > Now since we have created two vanishing point on a 2D place, what
> > happens when we introduce perspective or perspective-origin?
> >
> > from { transform: perspective(*) rotate(x(0deg), y(0deg)); }
> >
> > 25%  { transform: perspective(*) rotate(x(45deg), y(90deg)); }
> 
> >> 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.
> 
> 
> You didn't answer my question. Also you are not replying inline so my
> question is not supported by my example (which I have now copied above).
> I believe it to be a very valid question and as valid as your request for
> rotate(x, y). The question is also for the yourself, the CSS WG and
> implementers and not concerning authors.
> 
> 
> > 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...
> 
> 
> Rik, rotate(x, y) may have a use. You just have to prove it.
> 
> 
> > (ie in the attached file, the green animation has this effect
> > applied.)
> 
> 
> See the demo below.
> 
> 
> >> 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.
> 
> 
> Really? I think my demo is exactly the same rendering as your hello with the
> skew.
> 
> 
> > 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.
> 
> 
> I will look at that later.
> 
> 
> > Also, looking at the working draft, rotateX/Y are not listed:
> > http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090320/ Are only
> 2d
> > transforms are supported in animations and transitions or is the spec
> > incorrect?
> >
> > Rik
> 
> 
> In 2D there can only be one rotation since x and y are locked together.
> 
> Now for the demo of the green animation.
> 
> <http://css-class.com/test/css/3/transform-skewing-band.htm>
> 
> 
> This is the type of challenge that is needed. To see how powerful and
> how far animation can be pushed. My initial thought was no way but with
> a bit of playing around, it started to work. Doing it has allowed me to
> give this feedback.
> 
> 1. The text must be in the final box (div.final). The reason is that it
> can be in the placed in the first, frame and second box, but when a
> transform is given to it (to correct it's orientation), the green final
> box renders above the text. Is this a bug?
> 
> 2. The reason for wanting the text outside the final box is that how it
> now stands, the text is blurry. Is this a bug?
> 
> 3. The offset positions values are translated by skew* and rotate*.
> 
> 
> I noticed that your example has an expanding box to begin with. I made
> this first box at a static height of 50px. I wouldn't know if the later
> parts would work if I made this box transform to a larger height. Still
> testing.
> 
> 
> --
> Alan http://css-class.com/
> 
> Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Friday, 4 February 2011 03:38:39 UTC