Element conversion-Transform

Element conversion-Transform

The so-called element conversion is actually a matrix conversion of the element coordinates in two or three dimensional space. According to the conversion result, it is divided into multiple conversion types. However, no matter which type of element, it does not affect the physical space of the element on the page, but only changes the visual effect of the element. That is to say, element scaling and rotation do not affect the layout of other elements. Some developers prefer to use translation to align elements. In fact, it is very inappropriate because the original physical space of elements is still there and it is not easy to control.

In addition, there is only one conversion attribute (transform). Therefore, the conversion type cannot be superimposed. That is to say, if the previous rotation is done, if the translation is done again, the rotation effect will disappear. If you want to translate and rotate, you must use the matrix method.

Set the conversion Origin

Conversion origins are important in scaling, skew, and rotation. For more information, see conversion. By default, the conversion origin is the center of the element, that is, transform-origin: 50% 50% 0.

Conversion matrix

In two-dimensional space, the conversion matrix is a 3x3 matrix; in three-dimensional space, it is a 4x4 matrix. The 2x2 matrix on the left of the formula below is a conversion matrix. Because it is 2X2, it can only be scaled, rotated, or skewed, but cannot be translated. Therefore, the browser uses a matrix of 3x3 or 4x4.

The right side of the matrix (x, y) is the original coordinate, and (ax + cy, bx + dy) is the converted coordinate.

 

CSS 2D transformsTranslating-Translation

Translation is similar to position: relative. It does not affect the physical space location of an element, but only the visual space location. That is to say, although the element has left its original position, however, the physical space it occupies is still the original location, and only affects other elements in the original location.

You can use pixel values or percentages for the translation distance. If it is a percentage, the width and height of the box determine the final value of the percentage. 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 an unsupported browser, use position: relative and adjust it through top and left.

Scaling-Scaling

Zoom refers to zoom in and out, but the effect is only equivalent to a magnifier, and the physical space occupied by elements remains unchanged. Therefore, adding or downgrading elements does not affect the layout of other elements.

Of course, there is also a direction to zoom in and out, because the origin is the center point by default, so the default is to center to zoom in around. If you want to modify the zoom-in and zoom-out directions, you need to modify transform-origin.

If there is a value of 0, it is equivalent to setting width or height to 0. If scale only accepts one parameter, it means the scaling in the x and y directions is the same.

transform: scale(2.5);

transform: scale(2, 1);

transform: scaleX(2);

transform-origin: left top;

Skewing-skew

The skews are skewed to the X axis and to the Y axis, where the skew to the X axis is a clockwise twist visually and the skew to the Y axis is a clockwise twist. Therefore, if the x-axis and Y-axis have the same tilt angle, but the positive and negative are the opposite, it is equivalent to rotate, and the rotation direction is determined by the first value.

When one dimension is skewed, the size of the other dimension remains unchanged. For example, skew (30deg) indicates that it is tilted 30 degrees toward the X axis, but the height of the vertical axis of the element remains unchanged.

transform: skew(30deg);

transform: skew(30deg, 0);

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

Note: There is no 3D conversion for skew.

Rotating-Rotation

In fact, two-dimensional rotation is to rotate around the Z axis in three-dimensional space. The orientation of rotation isClockwiseDirection. The origin is an element by default.Central PointBecause the default value of transform-origin is transform-origin: 50% 50% 0. If you want to set the upper-left corner to the origin, set transform-origin to transform-origin: 0 0 0.

transform: rotate(30deg);

CSS 3D transform

The 3D conversion mentioned below is not supported in IE9.

Translating-Translation

There is no difference between 3D translation and 2D translation, and the last Z axis coordinate has no effect. Note that the z-axis coordinates and z-index are completely different.

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

Scaling-Scaling

3D scaling requires attention to the zoom origin. The origin determines the zoom direction and has a great impact on the visual effect.

Rotating-Rotation

Rotate3d (), rotateX, rotateY, and rotateZ are used in theory only in 3D space. For example, rotateX and roateY are invalid in 2D space. However, rotate3d and rotateZ can convert XY two-dimensional space. For example, if rotate3d (0, 0, 1, 10deg), the elements can rotate clockwise for 10 degrees in two-dimensional space. Likewise, rotateZ (10deg) also allows the element to rotate clockwise for 10 degrees in two-dimensional space. It should be noted that the X and Y axes do not have values. Otherwise, they are calculated based on three-dimensional space, which leads to conversion failure.

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

Note: ie9 does not support rotate3d, rotateX, rotateY, and rotateZ methods.

Perspective-Perspective

Perspective: the distance between the z = 0 plane and the user. The larger the perspective value, the closer it is to the user and the larger it looks. The smaller the perspective value, the farther away it is from the user, the smaller it looks.

Pivoting is only valid in 3D space, a bit like z-index.

transform: perspective(1);

Compatibility

Earlier versions of Firefox, Chrome, Opera, or IE are compatible with the following Prefix:

-moz-transform: rotate(30deg);

-o-transform: rotate(30deg);

-webkit-transform: rotate(30deg);

-ms-transform: rotate(30deg);

transform: rotate(30deg);

IE

The BasicImage filter of IE supports four rotation values: 0, 1, 2, and 3, which correspond to 0, 90,180, and 270 degrees respectively.

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

In addition, IE has a matrix filter, which can also achieve the CSS transform effect. For details, refer:Https://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx。

If you cannot calculate it yourself, here is another tool that can help you calculate:Http://www.useragentman.com/IETransformsTranslator/. Note that later versions of IE may not be able to see these effects in compatibility mode. You must use the actual version of IE to see these effects.