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 developers like to use panning to do the element centering effect, in fact, very inappropriate, because the original physical space elements are still there, control is not easy.

In addition, the conversion property (transform) has only one, so the conversion type cannot be superimposed. 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 method.

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 transformstranslating– 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 means zooming in and out, but the effect is equal to looking at 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, it is equivalent to setting width or height to 0, or if scale accepts only one parameter, indicating 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.

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.

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

There is no difference between 3D panning and 2D panning, and the last z-axis coordinates have no effect. 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

The conversion Method Rotate3d (), Rotatex, Rotatey, Rotatez are theoretically only used in three-dimensional space, such as Rotatex and Roatey are not valid in two-dimensional space. But Rotate3d and Rotatez can do xy two-dimensional space conversion, for example, if Rotate3d (0, 0, 1, 10deg) can let elements 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. It is important to note that the X and Y axes should not have values, otherwise they are computed in three-dimensional space, which causes the conversion to fail.

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

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

Perspective-Perspective

The perspective represents the distance between the z=0 plane and the user, and the greater the pivot value, the closer it looks to the user, and the smaller the pivot value, the farther away from the user, the smaller it looks.

Perspective only works in three-dimensional space, a bit like z-index.

transform: perspective(1);

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);

另外，IE有一个矩阵滤镜，也可以做到CSS的transform效果，具体参考：Https://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx。

如果自己算不来，这里还有一个工具可以帮助你计算：http://www.useragentman.com/IETransformsTranslator/。注意，用高版本的IE在兼容模式下不一定能看这些效果，需要真实的该版本IE才能看到。

Element Conversion-transform