Transform things you don't know.

transformis one of the many CSS3 new features that touched me most because it made the square box module real.

The transform implements a 2D or 3D transformation of the box size, position, and angle through a set of functions. For a long time, however, I was not quite sure about the following questions:

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

2, the Displacement ( transform:translate ) and relative positioning, absolute positioning ( position:relative absolute ) What is the relationship?

3, in the actual project found that the bitmap (whether background-image or img not) after being transform will blur out, especially scale ; not only that, in some websites, For example, tmall.com, even if the vector of SVG files in the use of transform, still blurred, transform is the role of the box to do a grid-like operation?

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

5, this scene temporarily failed to reproduce, under the chrome: The parent element is used position:fixed , the child element set pseudo class, the :hover transition transition animation, and uses JavaScript dynamically adds/deletes its class, this time will appear :hover The failure of the style 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 done through a series of matrix transformation, scale and other transform-function are the matrix Package, the consortium did not find the description. For something in linear algebra, the blogger says very little white, and the mathematical principle is to give it to someone else to explain it. O (???) O

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

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

Does that mean scale scaling, or does it just zoom in pixel sense? Thus, it is reasonable to blur the vector content such as SVG caused by scaling.

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

To understand transform, there is a matter to be clear, that is, 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 box can get the size you want, and put it where you need it.

The pages we usually see are flat 2D, but the visual model is 3D, except for the X axis, the y-axis, and the Z axis, which determines the order 1 of the element display. The z-axis crosses the computer screen vertically, the side of the user is a positive axis, and the closer the box is to the user in the z-axis direction, the more forward the display.

The official view of the visual format model is that it prescribes how the client handles the document tree in the medium

......

This section covers a number of new concepts, including 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 more.

Bo Master first heard the concept of visual formatting model, but read the explanation should know, this is not a new concept, pose level catch urgent?

According to this explanation, the element set does transform not change the element's document flow, its layout is still subject to the box model, so the effect of the transformation here can be with the floating, positioning coexist.

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

• Multiple matrix transformation functions will be evaluated sequentially 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 effects are the same:

  html

  < Div style= "Transform:scale (1.5, 1.5)" >

  < div> the location of < code>

  < div> the location of < code>
< div> the location of < code>

• Coordinate origin is subject to the property  transform-origin The effect of the .

• , if it is a 3D transformation, is also added to a 3D rendering context (3D rendering contexts). From a 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 the number of elements in a document that are absolutely positioned. Any transform value of

• That is not none will result in the creation of a stacked context (stacking contexts) and containing blocks (containing block).

However, does not mean that harmony, otherwise how can there be so many pit problems! (,,???,,)

If the element is transform and the parent element is stretched, the parent element overflow determines whether the scroll bar, the part of the hidden overflow, or whatever is on its own property.

In addition, according to the specification, because of the creation of a stacked context, the element affects the fixed positioning of its child elements: the position:fixed child element being set will not be based on viewport, but based on the parent element.

We know that in general, all elements with position values that are not static are placed in the same stack context (ie not advanced browsers), that is, only one stack context exists. The element that sets the transform is different, because it creates a new stacked context, that is, the z-index of its internally positioned elements is placed in a completely separate space.

But this stack context does not contain the element itself that is defined transform, and it is still placed in a larger stack context (if any).

Speaking of which, the opening question 2 and 4 have already found the answer, but at present, there is a bug:rendering bug:position:fixed and-webkit-transform in Chrome.

It is more troublesome to reproduce the scene with another problem, not to discuss it first.

Leave a few pits to fill back:

• When you transform meetdisplay:table table-row table-cell
• 3D rendering Context What the heck is that?
• A strange and familiar backface-visibility
• Transform and CSS3 Animation
• Transform and Canvas
• Transform and SVG