Element Conversion-transform

The so-called element conversion, in fact, is the coordinates of the elements in two-dimensional or three-dimensional matrix conversion. According to the result of conversion, it is divided into several types of conversion. Either way, it doesn't affect the physical space of the element on the page, it only changes the visual effect of the element. This means, for example, that element scaling and rotation do not affect the layout of other elements around it. Some people like to use panning to do the central effect of the element, in fact, very inappropriate, because the original physical space elements are still there, control is not easy.

In addition, there is only one conversion attribute (transform). That is, if you have previously rotated (rotate), if you do the translation (translate), the rotation effect will disappear. If you want to pan and rotate, you must use the matrix or Matrix3D method. But also not can not stack, just a number of effects need to separate space, such as: Transform:rotatey (90deg) Translatez (50px);

Whether it's two-dimensional or three-dimensional, remember that all of these conversions are based on the Cartesian coordinate left-hand system (and the left-hand line that flips 180 degrees along the x-axis), rather than the right-hand system. If you don't know the left and right hand lines, please Chado.
set Conversion Origin

Conversion origin is important in scaling, skewing, and rotating, with specific reference to each conversion. The conversion origin is the center of the element by default, which is transform-origin:50% 50% 0. Transformation Matrix

In two-dimensional space, the transformation matrix is a 3x3 matrix, and in three-dimensional space, it is a 4x4 matrix. The 2x2 matrix on the left side of the formula is a transformation matrix, because it is 2x2, so it can only be scaled, rotated, tilted, and cannot be panned. So, in fact, the browser is using a 3x3 or 4x4 matrix.

The right side of the matrix (x, y) is the original coordinate, (Ax+cy, Bx+dy) is the converted coordinate.

CSS 2D transforms translating– Panning

Panning and position:relative effects are similar, do not affect the physical space position of the element, only affect the visual space position, that is, although it appears that the element has left the original position, but it occupies the physical space is still the original position, and only in the original location of the other elements have an impact.

The distance you translate can be either using pixel values or percentages. If it is a percentage, the width height (width & height) of the box determines the final value of the percentage, where the horizontal displacement depends on the width of the box, and the vertical displacement depends on the height of the box.

Transform:translate (50px, 100px);

Transform:translatex (50px);

Transform:translatey (50%);

Transform:translatey (100px);

In unsupported browsers, use Position:relative, which can then be adjusted with top and left. scaling– Scaling

Zooming refers to zooming in or out, but the effect is equal to the magnifying glass, and the physical space occupied by the element remains unchanged. Therefore, zooming in or out of an element does not affect the layout of other elements around it.

Of course, zooming in and out also has a direction, because the origin is the center point by default, so the center zooms in by default. If you want to modify the zoom in and out direction, you need to modify Transform-origin.

If there is a value of 0, then this element will not be visible; If scale accepts only one parameter, it indicates that the X and Y directions are scaled in the same multiples.

Transform:scale (2.5);

Transform:scale (2, 1);

Transform:scalex (2);

Transform-origin:left top;

skewing– Tilt

The tilt is tilted to the x-axis and tilts to the y-axis, where the tilt to the x-axis is visually counterclockwise-twisted, and the tilt to the y-axis is visually twisted clockwise. Therefore, if the x-axis and y-axis are the same, and the opposite is equal to rotation (rotate), the direction of rotation is determined by the first value.

Tilt logic: When one dimension is tilted, the size of the other dimension remains the same. For example, skew (30DEG), which indicates a 30-degree tilt to the x-axis, but the vertical axis height of the element remains unchanged. Therefore, for skew (30deg), the transformation formula for the first quadrant space is X=x+y*tan (30deg).

Transform:skew (30DEG);

Transform:skew (30deg, 0);

Transform:skew (30deg, -30deg);

Note: The tilt does not have a 3D conversion. rotating– Rotation

Two-dimensional rotation is actually in three-dimensional space around the z-axis rotation, rotation direction is clockwise , the origin is the default element is the center point , because the default value of Transform-origin is transform-origin:50% 50% 0. If you want the upper-left corner to be the origin, you should set Transform-origin to transform-origin:0 0 0.

Transform:rotate (30DEG);

CSS 3D Transform

The 3D conversions mentioned below are not supported in IE9. Translating-Panning

The translation along the x and Y axes is supported in two dimensions, where the main point is how to translate along the z-axis. To see the 3D effect panning along the z-axis, first the parent element needs to set perspective, which is the distance from the user before the element. Now assume that perspective is positive, that is, perspective>0px. If shift is less than perspective in Translatez (shift), the element remains in front of the user's eyes, and the element is always visible to the user. If shift is greater than perspective, it means that the element is already behind the user and the user cannot see the element.

And you'll find that shift is less than perspective, and the larger the shift value, the more the element looks, which is what people see when they look at objects far and near.

In addition, note that z-axis coordinates and Z-INDEX are completely different and do not affect each other.

Transform:translate3d (50px, 100px, 0);

Scaling -Scaling

3D scaling you need to be aware of the scaling origin, the origin determines the direction of the zoom, the visual effect is very large. rotating– Rotation

Similarly, to see the 3D rotation effect, you also need the parent element to set the perspective style, otherwise the conversion method Rotate3d (), Rotatex, Rotatey, Rotatez effect and in the two-dimensional space, and Rotatex and Roatey are not valid in two-dimensional space. But this does not prevent Rotate3d and Rotatez can do xy two-dimensional space conversion, for example, Rotate3d (0, 0, 1, 10deg) can let the element in two-dimensional space clockwise rotation 10 degrees, similarly, Rotatez (10DEG) You can also let elements rotate 10 degrees clockwise on a two-dimensional space.

Transform:rotate3d (0, 0, 1, 30deg);

Note: IE9 does not support Rotate3d, Rotatex, Rotatey, Rotatez methods. Perspective-Perspective

The perspective distance represents the distance between the z=0 plane and the user, perspective>0 indicates that the z=0 plane is in front of the user, otherwise the user will not see this element after the user.

<div style= "perspective:50px;" >
    <div style= "Translatez (20px);" >content</div>
</div>

The above code indicates that the z=0 plane is 50 pixels from the user, and the content is 20 pixels from the z=0 plane, which means that the content is now 30 pixels from the user. As a result, users see a larger content than normal. Another transform:perspective (50px) +transform-style:preserve-3d effect is equivalent to perspective:50px.

But there is a big difference between perspective:50px and transform:perspective (50px), that is, the origin of the perspective attribute is Perspective-origin, And the origin of transform is tranform-origin. compatibility

Early versions of Firefox, Chrome, opera, or IE, using prefix compatibility:

-moz-transform:rotate (30deg);

-o-transform:rotate (30deg);

-webkit-transform:rotate (30deg);

-ms-transform:rotate (30deg);

Transform:rotate (30DEG);

IE

IE's basicimage filter supports four rotation values: 0, 1, 2, and 3 respectively for 0, 90, 180, and 270 degrees.

Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=3);

In addition, IE has a matrix filter, you can also do CSS transform effect, specific reference: Https://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx.

If you don't, here's a tool to help you calculate: http://www.useragentman.com/IETransformsTranslator/. Note that the high version of IE in compatibility mode does not necessarily look at these effects, it is necessary to real version ie to see.