Analysis of rendering of Transform transform model in CSS3

This article mainly introduces the analysis of the rendering of the transform transform model in CSS3, which has certain reference value, now share to everyone, the need for friends can refer to

Transform through a set of functions to achieve the box size, position, angle of 2D or 3D transformation, here we mainly to understand the transform transformation model in CSS3, especially the web-side 3D rendering animation friends do not miss

Introduced

Transform is accomplished through a series of matrix transformations, and the transform-function of scale is the encapsulation of the Matrix.

The explanation in W3 is that transform is based on a visual format model (visual formatting model, which translates right) and draws a coordinate system for it, and all operations within that coordinate system, such as right-down, are represented in pixels in this coordinate system.

Element set transform does not change the document flow where the element is located, its layout is still dominated by the box model, so the effect of the transformation here can be with floating, positioning coexist.

When the element is set to transform, a coordinate system is defined for the element, and a matrix transformation is made within that coordinate system to map the transformation results to the user coordinate system (that is, the actual context).

Multiple matrix transformation functions are calculated from left to right, such as Transform:translate (80px, 80px) scale (1.5, 1.5), and the browser calculates the displacement first and then zooms 1.5 times times. The following two code works the same way:

Html

<p style= "Transform:translate (80px, 80px)" >     <p style= "Transform:scale (1.5, 1.5)" >          <p style= " Transform:rotate (45deg) "></p>     </p>   </p>

Html

<p style= "Transform:translate (80px, 80px) scale (1.5, 1.5) rotate (45deg);" >    </p>

The position of the coordinates origin is affected by the property transform-origin.

If it is a 3D transform, it is also added to a 3D render context (3D rendering context). According to personal understanding, no matter how many elements are converted to 3D, they will always be within this context and may interact with each other, similar to multiple absolutely positioned elements in a document.

Any transform value other than none causes a stacking context (stacking context) and the creation of the containing block (containing block).

Transform Rendering Model
Specifying a value other than none for the transform property creates a new local coordinate system on the element and applies it to the element. Elements can be drawn to render their own coordinate system through the transformation model of the element. Transformations can be accumulated. In other words, the element can establish its own local coordinate system through the system of the parent element's coordinates. From the user's point of view, an element not only can accumulate the transform attribute effectively from its ancestor element, but also can add transform attribute to oneself and apply with oneself. The accumulation of these transformations represents the current transformation model for the elements.

Coordinate space with two axes: The x-axis is positive horizontally to the right, and the y-axis is vertical downward. The three-dimensional transformation function increases the coordinate space to extend it to three-dimensional space, the added z-axis is perpendicular to the screen, and the orientation for the observer is positive (that is, we are in front of the computer screen).

The transformation model is calculated using the following transform and Transform-origin properties

Start with a concrete model
Move with Transfrom-origin x, y, Z computed values
Left-to-right composite application in the Transform property of transform functions
Invalidates and moves the value of the previously set Transform-origin
EXAMPLE1

P {     transform:translate (100px,100px);   }

EXAMPLE2

p {     height:100px;     width:100px;     transform-origin:50px 50px;     Transform:rotate (45deg)   }

The transform-origin moves the origin by moving 50px each in the x, Y axis direction. The element rotates 45° clockwise along the origin. When all transform functions are applied, the shifted origin is shifted -50px on the x, Y axis and back to its original position.

Understand
The meaning of the above is that the starting point of the transform-origin is the position at the origin, the rotation revolves around the transform-origin, and the movement of the transform-origin begins at the origin. Instead of the default position of the Transform-origin starting to move (the default is the element center, the previous example is just right to move to the center of the Element), transform-origin after it has been moved, and after the transform functions has been applied on the element, The translated Origin will return to its original position, that is, the next change in the position of the transform-origin is still calculated from the starting point (that is, the original point).

EXAMPLE3
The dark green portion of the image below is the original appearance of the element when the transform attribute is not used.

p {     height:100px;     width:100px;     Transform:translate (80px,80px) scale (1.5,1.5) rotate (45deg);   }

First move the 80px on the x, Y axis, then enlarge the element by 150% and then rotate clockwise 45 ° along the z axis.

Note: Scaling and rotation are all run through the center of the element, because the default Transfrom-origin value for the element is 50% 50%.

The same effect as above can be achieved by nesting elements

<p style= "Transform:translate (80px, 80px)" >    <p style= "Transform:scale (1.5, 1.5)" >        <p style= " Transform:rotate (45deg) "></p>    </p>  </p>

3D Transform Rendering
Typically, elements are rendered according to the plane, and the elements being rendered are consistent with the plane of their containing block. The transform functions of a plane can change the performance of an element, but it is still rendered in the same plane as its containing block.

A three-dimensional transformation causes the transformation model to have a Z component that is not 0 (the z-axis is projected outside the screen). This can cause elements to render in different planes rather than within the plane of its containing block. This may also affect the pre-to-post rendering order of one element and another element associated with it, while causing a crossover with other elements. This performance depends on whether this element is a member of the 3D rendering context, as described below

The above description is not completely accurate in the WebKit is implemented. Maybe it will be changed to adapt to the present is the realization? See,bug 19637
EXAMPLE4

p {     height:150px;     width:150px;   }   . container {     border:1px solid black;     Background-color: #ccc;   }   . Transformed {     Transform:rotatey (50deg);     Background-color:blue;   }

<p class= "Container" >    <p class= "transformed" ></p>  </p>

This transformation is a 50 degree rotation around the vertical y-axis. But why did the change make the box narrower? Instead of becoming three-dimensional?

The perspective and Perspective-origin properties can increase the perception of the viewer at the depth of space by making the element taller in the z-axis, and the smaller it can be made in the same way. The scale item formula for scaling is d/(d-z), and the value of perspective is the position from the drawing plane to the assumed viewer's eye.

Graphically explains how scaling depends on the value of the perspective property and Z. In the chart above, the z-value is half of D. The original circle (the solid circle) appears on the z (dashed circle), in order for it to be rendered in the picture, the circle is scaled up by the above two elements, and finally the magnified light blue circle is presented in the screen. In the following graphic, the circle shrinks by the proportions of the 1/3 circles that appear behind the original position, and finally shows a smaller, lighter-blue circle in the screen.

It is usually assumed that the observer's eye position is in the center of the screen. However, if you want to, this position can also be moved-for example, if a Web page contains a lot of pictures then everyone will share the same perspective by setting the value of Perspective-origin.

The graph shows the effect of moving up perspective origin on the performance

The perspective model is calculated as follows:

1. Start with a specific model
2. Move by setting the computed value for x, y of the Perspective-origin
3. Apply the value to the model by getting the perspective attribute
4. Invalidates and moves the value of the previously set Perspective-origin
EXAMPLE5
This example shows that the perspective can be used to express the three-dimensional transformations to show more real details.

p {     height:150px;     width:150px;   }   . container {     perspective:500px;     border:1px solid black;     Background-color: #ccc;   }   . Transformed {     Transform:rotatey (50deg);     Background-color:blue;   }

<p class= "Container" >    <p class= "transformed" ></p>  </p>

The element inside has the same transformation as in the previous example, but its rendering is affected by the perspective attribute on the parent element. The perspective gives a visible depth, causing the vertex to have a z-coordinate (near the observer) so that it is magnified in the X, Y axis, and further (on the negative z-axis) is scaled down.
A stereoscopic transformation element that is not included in the 3D rendering context has a suitable transform value for rendering, but does not intersect with any other element. The stereoscopic transformation in this EXAMPLE4 can be considered as a painting effect, like a transformation in a plane. Similarly, transformations do not affect rendering commands. For example, setting Z's value in transform causes the element to move so that it may make the element larger, but it does not cause the element to render an element that does not have a Z-value set in front of it.

A stereoscopic transformation element contained in a 3D rendering context can intersect other elements in the same 3D rendering contexts, and elements that participate in the same 3D rendering context may hide or intersect with each other depending on their transformation results. Placed in the same 3D coordinate space, so that they are all brothers and sisters. The placement of an element in a stereoscopic space is determined by the transformation model accumulated in the containing block that creates the 3D rendering context.
EXAMPLE6

p {     height:150px;     width:150px;   }   . container {     perspective:500px;     border:1px solid black;     Background: #ccc;   }   . Transformed {     Transform:rotatey (50deg);     Background-color:blue;   }   . Child {     transform-origin:top left;     Transform:rotatex (40deg);     Background-color:lime;   }

<p class= "Container" >     <p class= "transformed" >       <p class= "Child" ></p>     </p >   </p>

This example shows how the nested 3D transform elements are rendered when the transform-style:preserve-3d is missing. The blue P is the same as the previous example, and is affected by the perspective property of the parent element. The green-yellow element also has a 3D transformation that rotates around the x-axis. However, the greenish-yellow element is rendered in the plane of its parent element because he is not a member of the 3D rendering context; The parent element is two-dimensional.
Elements can be established and participate in the context of a 3D rendering as follows:

The 3D rendering context is created from a transform element with transform-style:preserved-3d values and is not a member of the 3D rendering context itself. Such an element is usually a containing block. An element that creates a 3D rendering context is also involved.
An element with a transform-style:preserved-3d value that participates in the context of the 3D rendering it creates, expands the 3D rendering context instead of creating a new 3D rendering context.
An element participates in the 3D rendering context unless its containing block establishes a 3D rendering context or extends the 3D render context
The final transformation result is usually the accumulation of 3D transformation models of elements rendered in the context of 3D rendering, as follows:

Start with a concrete model
Consider the following points for each containment block between the root element and the element in the 3D transformation:
1. Accumulate the perspective matrix on the containing block of the element (if possible). Include block does not have to be a member of the 3D rendering context
2. The element's offset-parent is relative to its containing block, and the element applies the calculated moving value equal to the vertical horizontal movement.
3. Cumulative Transform Effect
EXAMPLE7

p {     height:150px;     width:150px;   }   . container {     perspective:500px;     border:1px solid black;     Background: #ccc;   }   . transformed {     transform-style:preserve-3d;     Transform:rotatey (50deg);     Background:blue;   }   . Child {     transfom-origin:top left;     Transform:rotatex (40deg);     Background-color:lime;   }

This example is the same as the previous example, except that a transform-style:preserve-3d value is added to the blue element. The blue element establishes the 3D rendering context, and the green-yellow element is one of them. Now both the blue and the greenish-yellow elements are affected by the perspective in the container, and the same stereoscopic space is shared at the same time, so the light green element swings on its parent element.

Elements may intersect each other in the same 3D rendering context.

Elements that do not transform in the context of a 3D render are also likely to intersect the transformation elements on the z=0 plane.

In the 3D rendering context, after the accumulated transformations have been applied, the rendering order of the elements that do not intersect is based on the position on the z axis. Elements are in the same position on the z axis, the rendering order is determined by the stacking context.
EXAMPLE8

p {    width:150px;   }   . container {    height:145px;    Background-color:rgba (0,0,0,0.3);    border:1px solid black;    transform-style:preserve-3d;    perspective:500px;   }   . container>p {    position:absolute;    left:0;   }   . Container>: first-child {    transform:rotatey (45deg);    Background-color:orange;    top:10px;    height:135px;   }   . Container>: last-child {    Transform:translatez (40px);    Background-color:rgba (0,0,255,0.75);    top:50px;    height:100px;   }

<p class= "Container" >    <p></p>    <p></p>  </p>

This example shows that elements can intersect in the context of a 3D rendering. The container element creates a 3D rendering context for itself and he has two child elements. The child elements intersect each other, and the orange elements intersect the container.

Using a stereo transform, it is entirely possible to have the back of an element toward the viewer. The 3D transform element shows the same content on both sides, so the reverse looks like the front side of the mirror (as if the element were mapped to a mirror). Usually, the opposite side of the element is hidden from the viewer. However, the Backface-visiblity:hidden property allows the author to make it invisible when the opposite side of the element is toward the viewer. If an element with the Backface-visiblity:hidden attribute is valid, then his front and back are alternately hidden, and then the element is visible only when the front is facing the viewer.

Understanding Backface-visibility Properties

. wrap {     width:200px;     height:200px;     border:1px solid black;     perspective:200px;     Color: #fff;     Text-align:center;     font-size:50px;   }   . inner {     width:50px;     height:50px;     margin:20px Auto;     Background:orange;     line-height:50px;     Transform:rotatey (180deg);//Rotation   

<p class= "wrap" >    <p class= "inner" >2</p>  </p>

The left is rotated before the diagram is rotated to the right.

You can see that the picture right is like a projection in the mirror. This is the back of the element.
Next, when we add the Backface-visibility:hidden attribute to the element inner, the elements are hidden and appear to disappear.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!