3D Tranform in CSS3

Nowadays, without surprise, CSS3 is everywhere inserted in our Web pages, as web coders, When we're thinking about using 3d pictures or flash in our HTML pages, there are amounts of methods for us to choose, such as, emmmm.. (give me 2 minutes to clear my mind...let's go ~ :) OK, such as using pictures directly, SVG and canvas in HTML5, or just CSS3, maybe more. So, when facing different situations, we should choose one of them, relatively the 3d transfrom of CSS3 could help us to solve some problem by using the less code, less DOM, but easy to control. And I'll give some examples to really understand the details of 3d transform. Here are 6 key words of 3d transform as follows:

1. "transform-style"

If we want to make a 3d picture, we have to set it as "preserve-3d" ( or "-webkit-transform-style: preserve-3d" for webkit), means all the children nodes should be in 3d mode. So this attribute should set in the parent node. And it has the other value: flat. Just 2d, yep.

2. Understand rotateX, rotateY and rotateZ

It will be easy to see the x-axis and y-aris from the computer screen, however, how about z-axis? Easy! Huu? Just Image that your eyes' direction is perpendicular to the screen. Yep, let's show the picture and css code of them:

I use 2 picture in order to show the effect of 3d, so we just need to see the picture with number "2". The three pictures represent the case where the x-axis and the y-axis and the z-axis rotate clockwise by 30 degrees, respectively.

3. "perspective" and "perspective-origin"

What is perspective? If we already have some common sense about art or life, we should know when we see something from a remote distance, it looks smaller than it should be, in return, it will looks more larger when we put it in front of our eyes. And "perspective" is to set the distance between the object and our eyes, maybe a fake distance, because the computer don't know where our eyes really are. But here if the thing: the value more big, the object more large. And if we set the value more than a certain number, what will happen? :) The screen will fill with the object, and we can see nothing but the object. Because the screen assumes that the object is near our eyes very close. Just as a Chinese words:" A leaf barrier doesn't see Mount Tai". And how about "perspective-origin"? Yep! It's where our eyes are from the screen's point of view. And this attribute will cause the perspective blind spot, refered to PBS. PBS is when we put a card in front of our eyes, and rotate 90 degree, we can only see a line not a card. Nothing is clear than a picture, so let do some exams, I will show 3 pictures from different perspective origin, and all of them are rotated 30 degree based x-axis. We can see that the second picture shows as a line, because the PBS effect.

4. "backface-visibility"

This attribute has two value: hidden and visible. Just as its name, it sets whether we can see the back of the object, just like a opacity attribue for 3d object. The following has two 3d boxes, the first's backface is visible, and the other is hidden. If you are interested in the details of them. Just click 3d boxes.

5. Conclusion

For the page space reason, I dont want to give the details about "transform" and "transform-origin", anyway, those two attributes are also, emmmmmm easy to understand, maybe? And in future, if I could remember or meet some examples about CSS 3d, I will add them in this page. Thanks for reading.