Css3 transform attributes and their two-dimensional transformation matrices

TransformProperty implements some available SVG (Scalable Vector Graphics. It can be used for inline and block-level elements. It allows us to rotate, scale, and move an element, and all the child elements under this element rotate, scale, and move along with the parameter settings.

(1)Rotate(Rotation), 1 parameter, the parameter is the degree. It allows you to rotate an object by passing a degree value. The value can be positive or negative. A positive value indicates clockwise rotation, and a negative value indicates clockwise rotation. For example, rotate (20deg) rotates 20 degrees clockwise.

Rotatex (rotation), one parameter. The parameter is a degree. Rotate along the X axis. Rotatey (rotation), one parameter. The parameter is a degree. Rotate along the X axis.

Div {transform: Rotate (30deg);} // rotate 30 degrees clockwise

Div {transform: rotatey (30deg);} // rotate 30 degrees along the Y axis

(2)Scale(Scaling), 1 or 2 parameters, the parameter is a natural number value (can be positive, negative, decimal ). The first parameter corresponds to the X axis, and the second parameter corresponds to the Y axis. If the second parameter is not provided, the value of the first parameter is used by default. Description: the absolute value is greater than 1, which indicates amplification; the absolute value is smaller than 1, which indicates reduction. When the value is negative, the object is reversed.

Div {transform: Scale (2, 0.5);} // horizontal scaling 2 times, vertical scaling 0.5 times

(3)Translate(Translation), 1 or 2 parameters, the parameter is the pixel value. The first parameter corresponds to the X axis, and the second parameter corresponds to the Y axis. If the second parameter is not provided, the default value is 0. The parameter can also be positive or negative. The X axis: positive value indicates moving to the right, the negative value indicates moving to the left, the Y axis: positive value indicates moving down, and the negative value indicates moving up.

Div {transform: translate (50px, 100px);} // horizontally Pan 50 pixels, vertically Pan 100 pixels

(4)Skew(Distortion), 1 or 2 parameters, the parameter is a degree. The first parameter corresponds to the X axis (horizontal tilt angle), and the second parameter corresponds to the Y axis (vertical tilt angle ). If the second parameter is not provided, the default value is 0.

Div {transform: skew (30deg, 20deg);} // 30 degrees in horizontal direction and 30 degrees in vertical direction

(5)Matrix(<Number>, <number>, d, e, f) specifies a 2D transformation in the form of a transformation matrix, which is equivalent to directly applying a [a B C D E F] transformation matrix. The element is located based on the horizontal direction (X axis) and vertical direction (Y axis). This attribute value uses the matrix involved in mathematics.

Div {transform: matrix (0.866, 0.5, 0.866,);} // rotate for 30 degrees clockwise.

 

Note:By the way, the support for the transform attributes is still in the trial phase. Firefox needs to add the-moz-prefix and chrome and Safari needs the-WebKit-prefix, opera requires the-o-prefix. IE 9 also began to support two-dimensional matrix transformation, requiring a-MS-prefix.

 

Two-dimensional transformation matrix

For thisMatrixThe application has been puzzled, but does not know the role of each value or its operating mechanism. Today, I used various data experiments to find online materials. This matrix is basically used. HoweverThe basis of linear algebra is that the two-dimensional transformation matrix is still somewhat fuzzy. Now let's take a look at the summary of the online experts,Share with you.

The matrix method has six parameters, A, B, C, D, E, and F. The matrix corresponding to these six parameters is as follows:

Through testing and summarization, we can draw a conclusion:

In fact, all css3 deformation effects can be achieved using matrix. In fact, the browser seems to convert all the effects to matrix for execution (but we don't know it ).
In this case, we can summarize:
1, 4 is the result of scaling deformation Scale (sx, Sy) can be changed from matrix (sx, Sy ,)
5, 6 is the result of translation deformation. Translate (TX, Ty) can be converted from matrix (, TX, Ty,
2, 3 is the result of distortion. skew (θ X, θ y) can be transformed from matrix (1, Tan (θ y), Tan (θ X), 0 ).
1, 2, 3, 4 is the result of rotation deformation rotate (θ) can be transformed from matrix (COS θ, sin θ,-sin θ, cos θ ,)