W3C home > Mailing lists > Public > www-style@w3.org > January 2011

Re: [css3-transform] definition of skewing

From: Alan Gresley <alan@css-class.com>
Date: Tue, 25 Jan 2011 00:02:25 +1100
Message-ID: <4D3D7861.5030100@css-class.com>
To: Rik Cabanier <cabanier@adobe.com>
CC: Simon Fraser <smfr@me.com>, Chris Marrin <cmarrin@apple.com>, "www-style@w3.org" <www-style@w3.org>
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 


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


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
Received on Monday, 24 January 2011 13:04:04 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:55 UTC