On the usage of common transformation pattern changes in CSS3

This article mainly introduces the common transformation pattern Change usage Summary of CSS3, and summarizes the methods of rotation, scaling, translation, tilt and matrix usage, and the friends can refer to the following

1.rotate rotation
Rotate picture, Unit deg, meaning of "degree"

-moz-transform:rotate (20DEG); -webkit-transform:rotate (20DEG); -o-transform:rotate (20DEG); -ms-transform:rotate (20DEG);

2.scale zoom in and zoom out
Zoom out proportionally, such as "1.6" for magnification 1.6 times times, if "1.6" is reduced by 1.6 times times

-webkit-transform:scale (1.6); -moz-transform:scale (1.6); -o-transform:scale (1.6); -ms-transform:scale (1.6);

3.translate panning
The translate is a translation of the specified object, has two parameters, the first is shifted in the x-axis direction, and the second is the y-axis direction translation. If the second parameter is not provided, the default value is 0.

For example, you need to set an element to shift the x-axis direction of 30px and y-axis 20px when hovering over the mouse, so you can write:

#translate-demo:hover {       -webkit-transform:translate (30px, 20px);       -moz-transform:translate (30px, 20px);       -o-transform:translate (30px, 20px);       -ms-transform:translate (30px, 20px);       Transform:translate (30px, 20px);   }

It must be explained here that the latest version of the mainstream modern browser (Kayo test is Chrome 22.0.1229.94, Firefox 17.0.1, Safari 5.1.7, Opera 12.12) WebKit and Sa except Chorme kernel Fari does not require private properties to support transform, but because the transform attributes in the earlier modern browsers need to be supported by their own private properties, in order to be compatible with earlier versions of the browser, use transform in the actual project. It is best to use their own private properties, and for backwards compatibility, you need to add a call that does not have a private property.

4.skew Tilt
skew specifies that the element is skewed, that is, that the element is tilted around the x and Y axes, has two parameters, the first is the angle of inclination for the x-axis direction, and the second corresponds to the y-axis tilt angle. If the second parameter is not provided, the default value is 0. Skew is somewhat similar to scale, but the scale rotates only the elements, does not change the shape of the element, and skew changes the shape of the element.

For example, you might want to set an element to be skewed in the x-axis direction 30 degrees and the y-axis direction 30 degrees when hovering over the mouse, so you can write:

#skew-demo:hover {       -webkit-transform:skew (30deg, 30deg);       -moz-transform:skew (30deg, 30deg);       -o-transform:skew (30deg, 30deg);       -ms-transform:skew (30deg, 30deg);       Transform:skew (30deg, 30deg);   }

It is important to note that because translate, skew, and the scale mentioned above are both x-and y-axis related values as parameters, the TranslateX and Translatey, Skewx and skewy, and scale are also available for convenience. The X and ScaleY methods, respectively, are used to independently set the effect on the x-axis and y-axis directions.

5.matrix Matrix
Matrix, which is a 3*3 matrix, is specifically used here.
Use a matrix to represent property values?
Yes, in addition to transform, there are other attributes in CSS3 that use the matrix as the attribute value, in fact, the matrix is the most basic and powerful value in transform, the translate and skew above and the rotate and s Cale is implemented through the matrix at the bottom, so virtually all transform values can be represented by a 3*3 matrix.
We know that transform is a 2D transformation on the X-y coordinate system, so the transformation is actually the process of changing each point of the element through a transformation equation and then generating a new coordinate value. So we set the old x and Y coordinate values to Xprevcoordsys and Yprevcoordsys, and the new x and Y coordinate values are xnewcoordsys and Ynewcoordsys, respectively, since the transformation is in 2D, so the z-coordinate value is set to 1. 。 In this case, another matrix is set as follows,

The old coordinate value, the new coordinate value, and the matrix have the following relationship:

That is, the old and new values can be connected to the equation through a matrix, so developers only need to set the value of the matrix, you can write a custom transformation. The next step is to note that although the matrix is a 3*3 matrix, only 6 parameters are required for actual use (the other 3 is independent of the x and Y axes) and are called in the following order [a B c D E F]
For example, write the following statement:

#matrix-demo:hover {       -webkit-transform:matrix (1, 1, 0, 1, 0, 0);       -moz-transform:matrix (1, 1, 0, 1, 0, 0);       -o-transform:matrix (1, 1, 0, 1, 0, 0);       -ms-transform:matrix (1, 1, 0, 1, 0, 0);       Transform:matrix (1, 1, 0, 1, 0, 0);   }

This allows the element to stretch on the y-axis (that is, the effect of Skewy (45deg)) when hovering over the mouse.
In addition, if two or more transform methods are used at the same time, they can be combined to write.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!