Transform the things you don't know

transformMany of the new features of CSS3 have touched me most, as it has made Square's box module become real.

Transform implements a 2D or 3D transformation of the box size, position, and angle through a set of functions. But for a long time, I couldn't understand the following questions:

1, size scaling scale and zoom transformation is different, why scale the contents of the box is not misplaced, but zoom is not.

2. transform:translate what is the relationship between displacement () and relative positioning, absolute positioning ( position:relative | absolute )?

3, in the actual project found that the bitmap (either background-image or img ) after being transform will be blurred, especially scale ; not only that, on some websites, For example Tmall.com, even if the vector SVG file after the use of transform, still blurred, transform whether the function of the box is similar to the operation of the grid?

4, found in the actual project, if the parent element is used transform and the child elements are position:fixed positioned, then position:fixed the child elements set will no longer be based on the window positioning.

5, this scenario temporarily failed to reproduce, under chrome: The parent element is used position:fixed , the child elements <a href=".."></a> set the :hover pseudo-class, the transition transition animation, and use JavaScript to dynamically add/remove its class, this will appear :hover The style fails or the added class style fails and transition the transition animation fails.

Wait a minute.

Let's talk about the principle first.

On the Internet to see some of the Great God's blog, transform is through a series of matrix transformation completed, scale and other transform-function are the matrix of the package, the Web site did not find the relevant instructions. For the things in linear algebra, Bo is very small white, the mathematical principle, or to others to explain it O (︶^︶) o

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

The CSS visual formatting model describes a coordinate system within each element is positioned. Positions and sizes in this coordinate space can is thought of as being expressed in pixels, starting in the origin of POI NT with positive values proceeding to the right and down.

Does that mean scale scaling is just a pixel scale? As a result, vector content such as SVG due to scaling is a logical blur.

Personal guess, should first convert the imager, and then render, which should be related to each browser specific rendering process, related documents I did not check, if you know, please leave me a message.

To understand transform, there is one thing to figure out, is the visual formatting model, with the help of Google Niang, found the W3chelp on the Chinese version of the explanation:

The visual format model is a very abstract concept. It is the core of the CSS layout, through which the box can be sized to fit the desired position.

The page we usually see is a flat 2D effect, but the visualization model is 3D, except for the X-axis, the Y-axis, and the Z-axis that determines the order in which the elements are displayed in 1. The z-axis crosses the computer screen vertically, and the user-facing side is the positive axis, and the closer the box is to the user in the z direction, the more forward the display.

The official version of the visual format model is that it specifies how the client handles the document tree in the media

......

This section covers a number of new concepts, such as containing blocks, types of elements, positioning systems, block-level formatting contexts, inline formatting contexts, floats, absolute positioning and z-index, and details of the visual format model, automatic width height calculations, and so on.

The blogger first heard the concept of visual formatting model, but read the explanation should know, this is not a new concept, posture level catching urgent? _?

According to this explanation, the 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 evaluated from left to right, such as transform:translate (80px, 80px) scale (1.5, 1.5) , the browser calculates the displacement first and then scales 1.5 times times. The following two code works the same way:

  html <div style= "Transform:translate (80px, 80px)" > < Div style= "Transform:scale (1.5, 1.5)" > <div style= "transform:rotate (45deg)" ></div> </div> </ div>

  html <div style= "Transform:translate (80px, 80px) scale ( 1.5, 1.5) rotate (45deg); " > </div> the location 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 will result in the creation of a stacking context (stacking context) and a containing block (containing block).

However, does not mean harmony, otherwise how can have so many pits problem! (,,??,,)

If an element is transform by a parent element, the parent element overflow determines whether a scrollbar, hidden part of the overflow, or something else is present depending on its properties.

Also, according to the specification, because of the creation of the stacking context, the element affects the fixed positioning of its child elements: the child elements that are set position:fixed will not be positioned based on viewport, but based on the parent element.

We know that in general, all elements with position values that are not static will be placed in the same stacking context (ie does not count as advanced browsers), that is, there is only one stacking context. The element that sets the transform is different, because it creates a new stacking context, that is, the z-index of the element that is positioned within it is placed in a completely separate space.

However, this stacking context does not contain the element itself, which is defined transform, which is still placed in a larger stacking context (if any).

Speaking of which, the beginning of the question 2, 4 have found the answer, but currently, Chrome still exists a bug:rendering bug:position:fixed and-webkit-transform.

The above mentioned another problem to reproduce the scene more trouble, first not discussed.

Leave a few pits back to fill in:

• When you transform meetdisplay:table | table-row | table-cell
• What is a 3D rendering context?
• A strange and familiar backface-visibility
• Transform and CSS3 Animation
• Transform and Canvas
• Transform and SVG

Transform the things you don't know