Day 99th: CSS3 in Perspective perspective

CSS3 in Perspective perspective

• Perspective principle: near big far small .
• Browser perspective: Turn all images that are nearly large and small, perspective on the screen.
• Understanding the browser's coordinate system: The browser plane is a z=0 plane, the coordinate origin defaults to the center of the picture, and can be changed by changing the pivot origin.
• perspective: Distance, which indicates the length of the viewpoint from the screen. Viewpoint, used to simulate the position of the eye of a perspective effect.
• perspectiveorigin: Personal understanding is the xy coordinate of the viewpoint,perspective is the z coordinate , and the three can determine the unique position of the viewpoint in three dimensions.
  

Browser perspective schematic diagram

As the element moves backwards, the line between the pivot point and the position of the element and the focus of the screen is the element's projection on the screen. It's smaller than the original avatar size.

As with the previous process, the connection of the viewpoint to the moving element and the focus of the screen is the size of the element rendered on the screen, which is larger than the element.

Intercept is the x=0 plane, you can see the point of view on the height of the image projection, due to the change of the origin of the viewpoint, the angle of the point and the highest point of change, the projection on the screen is offset, the effect of the width is the same, The contour of the image also shows the change of each pixel of the image to a certain extent.

Understanding the law through schematic diagram

As the element moves forward along the z-axis, the smaller the distance from the viewpoint, the highest and lowest point of the viewpoint and element is the largest, and the magnification is greater. Summary: The smaller the distance between the zoom effect is more obvious ,translatez Larger amplification effect is more obvious .

When the element moves along the z axis greater than the distance of sight. Element is moved to the rear of the viewpoint, the solid cannot be projected on the screen, so the screen is not rendered. The image cannot be rendered on the translatez>perspective screen.

Perspective how to use

The use of perspective has a variety of scenarios, you can learn to choose what you need later on demand.

use in parent or child elements

The process of using different elements as viewing objects is to add the perspective attribute to different elements.

When you look at the stage as a viewing object, the child elements not only render the image different, but also disappear. Reasons such as interception y=0 plane, and browser top view, viewpoints in front of the browser, elements are now on the z=0 plane, integration now on the browser, the point of view and the elements of the different parts of the line, is our sight, when the element of the rotation of the elements of the angle with the line of sight coincident, because it has no width we can not see

The definition of different ways of writing

There are two ways to define perspective, as follows

.class{ perspective: 800px;}.class{ transform: prespective(800px)}

An individual's understanding of the two ways of writing is that individually defined perspective are projected on the screen only at the time of the initial rendering. The perspective written in transform will be re-rendered according to the changes in the transform animation. So when using JS or Css3 to animate, try to choose the latter way of definition.

Precautions for use

• Perspective definition in other 3d before the change, otherwise invalid such as Translatez, this is also very good understanding, to first determine the location of the eye, the image on the screen will have this calculation.

• Renders the parent element of the 3d effect to add the Transform-style:preserver-3d property. This property defines the element's child elements to be rendered according to the 3d effect.

• Backface-visibility is used to define the visual situation when the element is not facing toward the viewpoint.

Day 99th: CSS3 in Perspective perspective