Shulou(Shulou.com)05/31 Report--

This article mainly introduces the css perspective attribute and perspective () function what the similarities and differences of the relevant knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe you read this css perspective attribute and perspective () function what similarities and differences the article will have a harvest, let's take a look at it.

Perspective

The perspective attribute perspective is used to activate a 3D space on an element so that its child elements can be positioned in that space.

It allows you to add depth to the scene by making the higher elements on the z-axis (close to the observer) appear larger and the distant elements appear smaller.

The blue circle in this image represents an element in three-dimensional space. The letter d indicates the perspective value, which is the assumed distance between the observer's eyes and the screen. The letter Z indicates the position of the element on the z-axis. The farther the element is on the z-axis, the smaller it looks, the closer it looks to the observer, and the larger it looks. This is the effect of perspective in three-dimensional space.

Without specifying perspective, elements transformed using 3D transform functions will appear to be planar and 2D.

The perspective property perspective is used in conjunction with the CSS transform transforms. It requires a length value or keyword none. Use this property with any value other than none to establish a stacking context. It also creates a containing block (somewhat similar to position:relative), just as the transform attribute does.

The following illustration shows the result of transforming (rotating) an element in 3D space with and without specifying a perspective.

Use the rotateY () function to rotate the image 50 degrees on the y-axis. The image on the left shows the result of applying rotation with the specified perspective, and the image on the right shows the same transformation without perspective. In the image on the right, the transformation looks flat and two-dimensional because three-dimensional space is not triggered.

By default, the vanishing point (vanishing point) of 3D space is at the center. (it can be changed using the perspective origin property perspective-origin. )

Official grammar

Declaration:

Perspective: none |

Initial value: none

For: transformable elements

Animation: yes, as length

Value (Values)

None

Perspective is not applied, so 3D space is not triggered.

Specifies the assumed distance between the observer and the zroom0 plane. It is used to calculate the perspective matrix so that the perspective transformation is applied to elements and their contents. If set to zero, perspective should not be used. Negative values are not allowed. For a list of possible values, see the entry.

Examples

The following sets the perspective of an element whose child elements are transformed in 3D space triggered by the perspective attribute:

.container {perspective: 1800px;} .container .child {float: left; margin: 50px; transform: translateZ (- 50px) rotateY (45deg);}

Online Demo

You can best show the perspective of elements on 3D shapes, such as cubes.

In this demonstration, there are three identical cubes, all with the same transformation. Each of them has a different set of perspectives. Try changing the value of perspective to see how the depth of the scene changes.

The higher the perspective value, the weaker the effect, and the lower the perspective value, the stronger the effect.

Because the Nuggets do not support the introduction of iframe preview, the preview effect can be found in codepen css perspective demo

Perspective vs perspective ()

When you have an element that you want to transform in 3D space, you can activate the space using the perspective attribute perspective of its parent element, or use the perspective function perspective () that converts the element itself. So what's the difference between the two ways?

The perspective attribute perspective and the perspective function perspective () are both used to give depth to elements by making the elements higher on the z-axis (close to the viewer) appear larger and the elements away from appear smaller. The lower the value, the closer the z-pane is to the viewer, and the more impressive the effect; the higher the value, the farther away the element from the screen, the more subtle the effect.

When you use the perspective function perspective () to apply perspective to an element (for more information about how it works, see transform attribute entry transform), you only activate three-dimensional space on that element. The perspective () representation is convenient when applying three-dimensional transformations to individual elements. But when you have multiple transformed elements in a container, if each element uses the perspective function perspective () to set a perspective, the elements will not be arranged as expected. This is because each of them has its own three-dimensional space, so it also has its own vanishing point. To avoid this and allow element alignment, they should share the same space. By using the perspective attribute perspective on the parent container, create a 3D space that is shared by all its child elements, all of which will be transformed using 3D transformations.

The following illustration shows the result of triggering a 3D space on a container, where the child of the container rotates (left), and using the perspective function perspective () to trigger a 3D space on each project (right):

This is the end of the article on "what are the similarities and differences between the perspective property and the perspective () function in css? thank you for reading!" I believe that we all have a certain understanding of the knowledge of "what are the similarities and differences between the perspective attribute and the perspective () function in css?" if you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.