CSS3 3d– set up a 3D scene perspective Perspective-origin

CSS3 3d– Create a 3D scene

From yesterday evening began to see CSS3D, there is an idea to use WEBGL to achieve, and later found that CSS3 is so powerful, and do not card, the switch to CSS ...

Now there is the impulse to embrace the computer from the side of the view ... Some of their own understanding of the written down, write the wrong also please correct me, thank you.

coordinate system

Without a coordinate system there is nothing, keep in mind the following figure.

Source: Http://goo.gl/81KLr Key Terms

CSS is simpler than WebGL to define a few styles of 3d effects (but this also leads to inflexible). Detailed definition in http://www.w3.org/TR/css3-3d-transforms/here is just a simple talk.

Note that the following name is different for each browser, webkit the kernel please prefix-webkit-, such as transform, when used to define the-webkit-transform;firefox prefix is-moz-; 3D View

-webkit-transform-style:preserve-3d, you can set a 3D scene, but to achieve the effect you also need to set the following parameters perspective perspective

The simple point is that the 3D scene is displayed on the screen as a result of that position (near and far rather than distance). For example, you want to build a small cube, the length and width of the height are 40px. If your perspective < 40, that is the equivalent of standing in the box to see the results, if the perspective is very large that is standing in a very far place to see (the cube has become a small square)

(Pink is the page background-webkit-perspective:90;-webkit-perspective-origin:50% 40px;)

Also need to have a perspective position perspective-origin, this default is Center center. Or a small cube, if you stand in the center line of the position to see, you will see the left and right symmetry, if you stand above the top of the position, you will see other stereoscopic effect. (Note that higher than the top equals y decrease)

(-webkit-perspective:90;-webkit-perspective-origin:50% -60px; Cube length and width are all 40px; Note that the angle is different, but the cube is not rotated.

Note that perspective is only valid for descendants.

The 3D scene has the ability to move the div on the plane to the front or back of the face. I'll say it later.

Http://my.neverbest.com/enjoyhtml5/example/3dSense.html provides a demo that shows a 3D cube that supports only the WebKit kernel browser.

More Information

Blogging is always incoherent, the information I used to learn to paste it, or not very easy to find.

CSS 3D Transforms Module http://www.w3.org/TR/css3-3d-transforms/ Safari css Visual Effects guide–transforms/http Goo.gl/ackob

webkit.org 3D Transforms Http://goo.gl/uQe60

Safaridemos HTTP://GOO.GL/ISDJT