A classic square

First I start with just one salmony square:

Adding a perspective and Y-rotation

Second I will add a 600px perspective css class to it and rotate it 45 degrees (this is transform: perspective( 600px ) rotateY( 45deg );) - without a rotation, we wouldn't see any difference:

Comparing rotations

Third I compare different rotations:

Changing perspective, adding gradient

Now let's go a little wilder and play around with a lower, closer perspective (230px) to see what that means. Also I am keeping the 65 degrees from above and I am adding a gradient - let's call this "into the light":

About perspective-origin

We also have the choice to set the origin of our perspective, BUT as the guys from w3schools.com state so nicely:

"The perspective-origin property is not supported in any browser."

Continue exploring

Please note that all of the above does not work in every browser - if you are visiting this page on an Android 2.2 Froyo browser all the rotations above won't be visible.

So far for perspective and rotation - let's move on to the real thing: 3D transforms with an actual animation