Css3:perspective 3D Properties

This article quoted: http://blog.csdn.net/cddcj/article/details/52956540

perspectiveThe Z=0 property specifies the distance between the observer and the plane of the surface so that elements with three-dimensional position transformations produce a perspective effect. Z>0 's three-dimensional elements are larger than normal, while z<0 is smaller than normal, and size is determined by the value of the attribute.

A three-dimensional element is not drawn after the observer, which is the portion of the z-axis coordinate value that is greater than the Perspective property value.

By default, the vanishing point is at the center of the element, but you can perspective-origin change its position by setting properties.

When the property value is 0 或负值或 none（none是默认值） , there is no perspective effect.

--------------------------------------------------------------------------------------------------------------- -------------

The transform in CCS3 is a great tool for setting up interface styles and animations. The 3D transforms are also supported in Chrome and FF. IE9 not supported, IE10 support.

As long as the 3D scene will involve perspective problems and perspectives. The Setup method in transform is relatively straightforward:

1. Can only choose perspective, that is, near large and small display way.
2. The lens direction can only be in the parallel z-axis to the screen, that is, from the front of the screen to see.
3. You can adjust the lens and plane position:

• A) The perspective property sets the distance from the lens to the element plane. All elements are placed on the plane of the z=0. For example, Perspective (300px) indicates that the position of the lens from the element surface is 300 pixels.

• b) The Perspective-origin property specifies the position of the lens on the plane. The default is to place the center of the element.

Here's a cube (or dice) to show you the difference in perspective (perspective and).

The effect of different distances of the lens from the z=0 plane.

The difference between the x and Y coordinates (perspective-origin) when the lens is fixed in the Z coordinate. Summary: The significance of perspective is to set the ratio of the distance to the size of the point, so that it produces a 3D sense, but does not change the size of the object at Transform-origin.

Css3:perspective 3D Properties