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 Tuesday, 25 January 2011 14:39:47 UTC