Example method of sharing the perspective property of CSS3 setting 3D transform distance

The perspective property and the associated Perspective-origin attribute are all used to control the distance on the axis in the 3D graphics space, so let's share the example method of setting the 3D transform distance for the perspective property of the CSS3. Of course, we'll talk about the use of Perspective-origin later:

The perspective property is essential for 3D deformation. This property sets the viewer's location, maps the visual content to a frustum, and then throws it onto a 2D view plane. If you do not specify a perspective, all points in the z-axis space are tiled into the same 2D view plane, and the depth of field concept does not exist in the transform results.

The above description may be difficult to understand some, in fact, for the perspective property, we can easily understand as the distance, used to set the user and the element 3D space between the z plane. And its effect is determined by his value, the lower the value, the user and 3D space z plane distance closer, the visual effect is more impressive; conversely, the greater the value, the farther the user is from the Z-plane of the 3D space, the less visual effect.

In 3D transformations, the perspective property is essential for viewing the effect of deformation, for example, for deformation along the z-axis, as shown in the following example.

Let's start with a simple example, make a poker 3D rotation effect, and one of the parent elements of playing cards adds the sight perspective, while the other is not set:

Html

<p>     </p><p>   </p>

Css

p {       width:500px;       height:300px;       margin:30px Auto;       position:relative;       Background:url (images/bg-grid.jpg) no-repeat Center Center;       background-size:100% 100%;   }   P img {       position:absolute;       top:50%;       left:50%;       Margin-left: -71px;       Margin-top: -100px;        Transform-origin:bottombottom;   }   P Img:nth-child (1) {       opacity:. 5;       z-index:1;   }   P Img:nth-child (2) {       z-index:2;       Transform:rotatex (45deg);   }   P:nth-of-type (2) {       perspective:500px;   }

The effect is as follows:

The effect completely explains everything. If the parent node is not set perspective, the 3D rotation effect of plum King is not obvious, and after the parent node is set perspective, the Plum King is like a 3D rotation.

The example above illustrates the use of perspective in a simple way, and we look back at the use of perspective syntax:

Perspective:none | <length>

The Perspective property includes two properties: None and a length value with a unit. The default value of the Perspective property is None, which represents an infinite angle of 3D objects, but looks flat. Another value <length> accepts a value that has a length unit greater than 0. and its unit cannot be a percent value. The larger the <length> value, the farther the angle appears, creating a fairly low intensity and a very small 3D space change. Conversely, the smaller the value, the closer the angle appears, creating a high-intensity angle and a large 3D change.

You stand 10 feet and 1000 feet, for example, looking at a 10-foot cube. At 10 feet, you are the same size as the cube. So the perspective shift is far greater than standing at 1000 feet, and the stereo size is 1% of your distance from the cube. The same thinking applies to the <length> value of perspective. Let's take a look at an example to reinforce this understanding:

Html

<p class= "wrapper W2" >    <p class= "Cube" >        <p class= "side  Front" >1</p>        <p Class= "side back   " >6</p>        <p class= "side right  " >4</p>        <p class= "side   Left ">3</p>        <p class=" side    Top ">5</p>        <p class=" side Bottom ">2</p>    </p></p><p class= "wrapper W1" >    <p class= "Cube" >        <p class= "side  Front ">1</p>        <p class=" side back   ">6</p>        <p class=" side right  ">4 </p>        <p class= "side left   " >3</p>        <p class= "side    Top" >5</p>        <p class= "side Bottom" >2</p>    </p></p>

Css

. wrapper {       width:50%;       Float:left;   }   . cube {       font-size:4em;       Width:2em;       Margin:1.5em Auto;       transform-style:preserve-3d;       Transform:rotatex ( -40deg) Rotatey (32deg);   }   . side {       Position:absolute;       Width:2em;       Height:2em;       Background:rgba (255, 0.6);       border:1px solid Rgba (0, 0, 0, 0.5);       Color:white;       Text-align:center;       line-height:2em;   }   . Front {       Transform:translatez (1em);   }   . Top {       Transform:rotatex (90deg) Translatez (1em);   }   . rightright {       Transform:rotatey (90deg) Translatez (1em);   }   . Left {       Transform:rotatey ( -90deg) Translatez (1em);   }   . Bottombottom {       Transform:rotatex ( -90deg) Translatez (1em);   }   . Back {       Transform:rotatey ( -180deg) Translatez (1em);   }   . W1 {       perspective:100px;   }   . w2{       perspective:1000px;   }

The effect is as follows:

Based on the above introduction, we can make a simple conclusion to the perspective value:

1.perspective value is None or not set, there is no real 3D space.
The smaller the 2.perspective value, the more noticeable the 3D effect is, and the closer your eyes are to true 3D.
A value of 3.perspective is infinitely large, or a value of 0 o'clock is the same as the value of none.
In order to better understand the perspective attribute, it is necessary for us to combine his relationship with Translatez. In fact, the value of perspective can be simply understood as the distance of the human eye to the display, and translate is 3D object distance from the source point, the following reference to a map of the perspective and Translatez relationship.

Shows the perspective property and the position scale of the Translatez. To the top of the graph, Z is half a D, in order to use the original circle (outline) appears on the z axis (dashed circle), the solid circle on the canvas will expand two, such as a light blue circle. As shown in the bottom figure, the circle is scaled down, causing the dashed circle to appear behind the canvas, and the z size is one-third from the original position.

In 3D transformations, in addition to the perspective property can activate a 3D space, perspective () in 3D-deformed functions can also activate 3D space. They are different: perspective is used on stage elements (the common parent element of the deformed elements); perspective () is used on the current morph element and can be used with other transform functions. For example, we can put:

. stage {       perspective:600px}

Written:

. stage. Box {       transform:perspective (600px);   }

Consider a simple example:

Html

<p class= "Stage" >    <p class= "container" >            </p></p><p class= "Stage" >    <p class= "container" >            </p></p>

Css

. stage {       width:500px;       height:300px;       margin:30px Auto;       position:relative;       Background:url (images/bg-grid.jpg) no-repeat Center Center;       background-size:100% 100%;   }   . container {       position:absolute;       top:50%;       left:50%;       width:142px;       height:200px;       border:1px dotted orange;       Margin-left: -71px;       Margin-top: -100px;    }   . Container img{       Transform:rotatey (45deg);   }   . Stage:nth-child (1). container{       perspective:600px;   }   . Stage:nth-child (2) img {       transform:perspective (600px) Rotatey (45deg);   }

The effect is as follows:

The effect can be seen, although the form of writing, the property name is inconsistent, but the effect is the same.

Although the perspective property is the same as the function of the perspective () function, its value differs from the applied pair:

1. The perspective property can take a value of none or the length value, whereas the perspective () function can only be greater than 0, and if the value is 0 or less than 0, the 3D space will not be activated;
The 2.perspective property is used to deform pairs like parent elements, whereas the perspective () function is used for deforming pairs like itself and for use with transform other functions.

Perspective-origin Property

The Perspective-origin property is another important attribute in 3D transformations, and is primarily used to determine the source point angle of the perspective property. It actually sets the x-axis and y-axis position, where the viewer seems to be watching the element's child elements.

The syntax for using the Perspective-origin property is also simple:

The code is as follows:

perspective-origin:[<percentage> | <length> | left | center | right | top | bottom] | [[<percentage> | <length> | left | center | right] && [<percentage> | <length> | top | cen ter | Bottom]]

The default value for this property is "50% 50%" (that is, center), which can also be set to a value or to a value of two length:

The first length value specifies a position relative to the x-axis of the element's containing box. It can be a length value (expressed in supported length units), a percentage, or one of the following three keywords: Left (representing 0 of the length of the x-axis of the containing box), center (representing the middle point), or right (representing the length of 100%).
The second length value specifies a position relative to the y-axis of the element's containing box. It can be either a length value, a percentage, or one of the following three keywords: Top (representing 0 of the length of the y-axis of the containing box), center (representing the middle point), or bottom (representing the length of 100%).
Note that in order to refer to the depth of the transformation child element deformation, the Perspective-origin property must be defined on the parent element. Usually the Perspective-origin property itself does nothing, it must be defined on the element that has the perspective attribute set. In other words, the Perspective-origin property needs to be used in conjunction with the perspective property to move the viewpoint beyond the center of the element, as shown in:

Often we see the same thing can not always be in the center of the position to see, want to change the angle, change a position to see exactly, this time can not be separated from Perspective-origin this attribute, the following from the website of the map can be a simple explanation of this view: