RE: [css3-transform] definition of skewing

> 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/
Are only 2d transforms are supported in animations and transitions or is the spec incorrect?

Rik

-----Original Message-----
From: Alan Gresley [mailto:alan@css-class.com] 
Sent: Monday, January 24, 2011 5:02 AM
To: Rik Cabanier
Cc: Simon Fraser; Chris Marrin; www-style@w3.org
Subject: Re: [css3-transform] definition of skewing

On 24/01/2011 2:55 PM, Rik Cabanier wrote:

> <http://css-class.com/test/css/3/transforms-generated-content.htm>

> Thanks Alan. It is indeed a bit different and also a bit harder to 
> implement. I think a user might be hesitant to implement something 
> using a 3d transform.


Why? Because I used generated content? Safari seems to handle it quite well.


> FWIW if there was a rotate(x, y) the formula for 2D matrix 
> decomposition becomes significantly simpler.
>
> Rik


I like to be very honest with you Ric. I never studied maths above year
10 and because I somehow ended up in a lower stream, I topped my maths class but got only 4 (1 to 5, 1 being highest) in my school certificate. 
Not that I wouldn't love to learn more maths but at this moment, I do not visualize numbers. For me, it has to be visualization in my head which I am extremely good at. To downside is that to articulate what I see in my head doesn't transpose to well in written English.


The question I have is how is it possible to rotate one plane (one
element) with axises of x and y by rotation on both axises?


from   rotate(x(0deg), y(0deg))

25%     rotate(x(45deg), y(90deg))


One thing that happens is we gain two point perspective and the plane 
when viewed from front on (viewer) shows the top and bottom sides of the 
plane with a common vanishing point at 2 o'clock and left and right 
sides of the plane with a common vanishing point at 11 o'clock. The SWF 
file demo had the top and bottom parallel and running horizontally at 90 
degrees with no change at all.

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?

 From an authors perspective (no pun intended), how do they create and 
transform with rotate(x, y) and understand what is actually happening? 
It's much easier for and author to visualize two planes, one with x 
rotation and the other with y rotation.

This also allows one plane to be rotated and the other plane to be 
skewed and allows translation along the z axis for the rotated plane. 
The big bonus is that authors can use transforms without knowing 
con-sines, sines and angles.

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>


To demonstrate how your mathematical view is different from my 
visualization view.

<http://css-class.com/test/css/3/transform-color-cube.htm>


You can most likely express what is happening in a mathematical equation 
using only x and y axises. I would argue, no, and say that what we have 
is a 3D illusion on a 2D plane (display device) and theoretically the 
cube is rotating or rolling on all three axises at alternating rates.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo