# 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
```

Received on Monday, 24 January 2011 13:04:04 UTC