This paper mainly summarizes the experience gained by the author in learning 3D Transform. It is hoped that reasonable knowledge point arrangement can help people avoid detours. This paper does not involve 2D Transform, and readers who want to know related knowledge can Google relevant information. Hope to be able to harvest after reading, incorrect place, also hope you don’t hesitate to advise.

What is perspective

At the beginning of the word perspective, it can be said that the brain is blank. What exactly is perspective? Why can an element represent a 3D space if we give it the perspective attribute? It goes back to painting.

Perspective phenomenon

One phenomenon, which we have been accustomed to since childhood, is never strange: telegraph poles of the same size are of the same height, but on the road they look closer and lower; Cars of the same model, which should be the same size, look smaller and bigger on the road; All cups and buckets are originally flat at the bottom, but we often see different arcs. The two tracks of a train are originally the same width, but we often see that as they move forward, they get narrower and closer together. This visual phenomenon is called perspective, and it can be summed up as:

  • Depending almost small
  • Narrow width nearly far
  • Real nearly far

We all know that the real world is 3D, and light travels in straight lines to produce a flat image in the retina, but the image is so three-dimensional that it doesn’t let us bump into a wall or fall into a river. It can be said that the human eye sees the picture is perspective. And if we want to show this change on flat paper, to show the scene as reflected by our vision, full of three-dimensional sense of space, the simple way is: Fixed your eye position, across the transparent glass window you see the shape of the scenery according to the kind of description on the glass, this description down the graph will be more accurate reflection of this phenomenon, there is objective perspective law. Therefore, the meaning of “perspective” is: through the (hypothetical) transparent plane to observe the scene, study the shape change of the object in the three-dimensional space, that is, “see through”, with this observation method, can only have two dimensions of the transparent plane to record and draw a three-dimensional characteristics of the scene graphics. This figure is called perspective, and the earliest painters who studied perspective did it in this way. By summarizing the rules in perspective, the scientific method of painting perspective is called perspective. So as long as you take the method of perspective in two dimensions, you draw a picture that satisfies perspective. Can trick people’s eyes and give the picture a sense of three-dimensional space. As shown in the figure below

Perspective related terms

There are a lot of technical terms in perspective, and understanding them makes it easier to understand CSS 3D Transform.

Viewpoint: is the position of the painter’s eyes.

Middle line of sight: any straight line shot to the scene from the viewpoint is the line of sight, among which the line of sight leading straight ahead is the middle line of sight, which is always perpendicular to the picture. We can think of the picture as the screen, and the perspective property value is the length of the line of sight.

Primary point: The point at which the middle line of sight meets the horizontal line of sight (also called the central point).

Vanish Point: Vanish Point is an important concept in perspective. Parallel lengthening lines in a perspective meet at a Point known as the Vanish Point. The number of vanishing points in a radical perspective can be divided into one point perspective, two point perspective and three point perspective. Perspective-origin defines the point of extinction.

More on the basic concepts of perspective, I hope you can Google them after all our focus is on the front end.

Screen axis

Before we understand perspective, we need to understand the axes. The biggest difference between 3D deformation and 2D deformation is the difference in the reference axis. The coordinate axis of 2D deformation is flat, with only X and Y axes, while the coordinate axis of 3D deformation is a three-dimensional space composed of X, Y and Z axes, with x, Y and Z axes facing right, down and out of the screen respectively.

The user is facing the Z axis, the Y axis vertically, and the X axis horizontally. The rotateX, rotateY, rotateZ method is to rotate the element along the corresponding axis.

The 3D Transform attributes are broken separately

After understanding some basic concepts, we started to really enter the world of 3D Transform. The attributes involved in 3D deformation are transform-origin, transform, transform-style, perspective, perspective-origin and backface-visibility.

The perspective properties

Value:	none | <number>
Initial:	none
Inherited:	no
Copy the code

I don’t want to refer directly to the description in the specification for perspective attributes. Simply put, this is an element with the perspective attribute set, which has the ability to represent three-dimensional space. Perspective value defines the length of the line of sight, which is intuitively the distance between the user’s eyes and the screen, and officially the distance between the plane z=0 and the user. Each 3D element z>0 is larger, and z<0 is smaller. The intensity of THE 3D effect decreases as the Perspective value increases. When the Perspective value is None, less than or equal to 0, there is no 3D distortion.

See the Pen no-perspective by joker (@sponia-joker) on CodePen.

It is recommended to use the above HTML structure for 3d transform. Stage elements, container elements, morphing elements keep the model simple and easy to understand. In the demo above, we rotated the child element 45deg along the Y-axis, but the page did not behave as we expected. The effect was to reduce the width of the deformed element. This is because we do not set the perspective attribute for the parent element. The element does not have the ability to represent three-dimensional space, and ultimately represents the projection on the screen after the element rotates along the Y-axis, so the width will be reduced. But when we open the comment, it’s what we expect. You can do this manually on Codepen.

The perspective attribute can be written in two forms, one for stage elements (the common parent of animation elements); The second is used on the currently deformed element, along with the other properties of the transform. As shown below.

See the Pen perspective-function by joker (@sponia-joker) on CodePen.

The end result is exactly the same as setting the Perspective attribute on the parent element. But there is a big difference between the two attributes. The reason why the above attributes are the same is because there is only one element on the stage, and if there are more than one element, there will be a difference.

See the Pen perspective-vs-perspective-function by joker (@sponia-joker) on CodePen.

Clearly, perspective and perspective() functions have different representations when there are multiple elements. Mainly because the Perspective attribute is set on the parent element, all child elements have the same viewpoint, while the Perspective function used with the transform has a different viewpoint for each element. You can view it as 1 person watching versus 5 people watching. Even more surprisingly, when perspective is set to 100px, the penultimate element disappears in the demo where the parent element is given the Perspective attribute. Think about this for a moment and leave a comment if you don’t understand.

To sum up, perspective endods elements with the ability of 3D spatial display. It can be said that without perspective, there is no 3D. For more on the Perspective attribute, it is strongly recommended that the reader learn about the specification and MDN.

The transform – style property

value:flat | preserve-3d
Initial:flat
Inherited:no
Copy the code

The transform-style property defines how nested elements will be rendered in 3D space. When set to flat, all children of the element will be rendered in the 2D plane of the element. Therefore, rotating the element around the X or Y axis will cause children in positive or negative Z positions to appear in the plane of the element. Not before or after the element. If the transform-style value is preserve-3D, the flattening will not be performed and the child element will maintain its position in the 3D space. The element remains flat by default, and since this attribute cannot be inherited, to preserve the element hierarchy in 3D space you need to set transform-style to preserve-3D for each ancestor element in the hierarchy. Because transform-style affects only the child elements of the element, the leaf nodes in the hierarchy do not need to be set. We usually set the transform-style property to preserve-3d. To demonstrate the difference, click the codepen button to display alternately

See the Pen transform-style by joker (@sponia-joker) on CodePen.

Perspective – origin attribute

value:x-axis y-axis
Initial:50% 50%
Inherited:no
Copy the code

The perspective-origin attribute is simple. It sets the x and y coordinates of the viewpoint. Basically, it determines the way we look at the object. For more details, please refer to

Css-tricks is an introduction to this property.

Backface – visibility properties

value:visible | hidden
Initial:visible
Inherited:no
Copy the code

The “backface-visibility” attribute determines whether the “back” of the transformed element is visible to the user. Just like a coin, when we rotate 180deg along the Y-axis and the back is facing us, backface-visibility is used to set whether the back is visible. Backface-visibility is often used for rollover effects

See the Pen perspect-visibility by joker (@sponia-joker) on CodePen.

The resources

  1. www.w3.org/TR/2009/WD-…
  2. 3dtransforms.desandro.com/perspective
  3. www.w3cplus.com/css3/transf…
  4. www.cnblogs.com/xiaohuochai…
  5. www.zhangxinxu.com/wordpress/2…
  6. Css-tricks.com/almanac/pro…
  7. Css-tricks.com/almanac/pro…
  8. Blog.sina.com.cn/s/blog_5cd8…