CSS3 Transform Matrix

The transform in css3 makes it easy to perform deformation operations, such as translate-move, scale-zoom, rotate-rotate, and skew-slice. These attributes are very convenient and simple, but matrix is not often used. -Webkit-transform: matrix (1, 0, 0, 1,100,100). If you see such a css, you may hate a bunch of numbers, you may be able to get this product out of matrix-css? This article discusses matrix in transform.

I. First recognized matrix

2d matrix provides six parameters: a, B, c, d, d, e, and f. The basic syntax is as follows:

Review the high school mathematics or linear algebra to learn about the matrix calculation method. X and y are the initial coordinates of elements, and X' and y' are the new coordinates obtained after matrix transformation. Through the 3×3 transformation matrix in the middle, apply the transformation to the original coordinates to obtain the new coordinates. According to the matrix transformation rules, you can get:X' = AX + Cy + E
Y' = bx + dy + F.

The implementation principles behind translate, scale, rotate, and skew in transform correspond to matrix changes:

The transformation matrix formula can be referred to the transformation matrix wiki (http://zh.wikipedia.org/zh-cn/%E5%8F%98%E6%8D%A2%E7%9F%A9%E9%98%B5)

2. Move translate

The moving matrix parameter is matrix (, △x, △y) (△x and △y correspond to the increments of x and y axes respectively ). The formula shows that:

-Webkit-transform: translate (100px, 100px); that is, it corresponds to-webkit-transform: matrix (1, 0, 0, 1,100,100 );

Calculate:X' = 1 * x + 0*Y + 100 = x + 100,Y' = 0*X + 1*Y + 100 = Y + 100.

 

Iii. scale

The scaled matrix parameter is matrix (kx * X, Ky * y,) (kx, and KY correspond to the X-and y-axis scaling ratios respectively ). The formula shows that:

-WebKit-transform: Scale (1.5, 1.5); and corresponds to-WebKit-transform: matrix (1.5, 0, 0, 1.5, 0, 0 );

Calculate:X' = 1.5 * x + 0*Y + 0 = 1.5*X,Y' = 0*X + 1.5*Y + 0 = 1.5*Y.

4. Rotate rotate

The rotating matrix parameter is matrix (COS θ, sin θ,-sin θ, cos θ ,).

-WebKit-transform: Rotate (45deg); that is, it corresponds to-WebKit-transform: matrix (0.53, 0.85,-0.85, 0.53, 0, 0 );

(Sin (45') = 0.85, cos (45') = 0.53)

Calculation:X' = x * Cos (45')-y * sin (45') + 0 = x * Cos (45')-y * sin (45 ′), y' = x * sin (45') + y * Cos (45') + 0 = x * sin (45') + y * Cos (45 ′)

V. Diagonal Slice skew

The diagonal tangent matrix parameter is matrix (1, Tan (θ y), Tan (θ X), 0 ).

-WebKit-transform: skew (45deg); that is, it corresponds to-WebKit-transform: matrix );

(TAN (45') = 1)

CalculateX' = x + y * Tan (45 ′) + 0 = x + y * Tan (45 ′),Y' = x * Tan (45 ′) + Y + 0 = x * Tan (45 ′) + Y

Vi. mirror relative name

The image symmetry is not simplified. Finally, one can only be implemented using matrix...

Assume that the axis of symmetry is y = kx, then the matrix of this line is
Matrix (2 * UX ^ 2-1 * UX * Uy, 2 * UX * Uy, 2 * Uy ^ 2-1, 0, 0)
The solution process is as follows:
Assume (ux, uy) is the unit vector in the straight line direction. That is to say, if the linear equation is y = kx, then ux = 1/sqrt (1 + k ^ 2), uy = k/sqrt (1 + k ^ 2 ),
Calculate:X' = (2 * UX ^ 2-1) * x + 2 * UX * Uy * y
Y' = 2 * UX * Uy * x + (2 * Uy ^ 2-1) * Y.

VII. 3d Transformation Matrix
3d matrix is Perspective Projection. The calculation method is similar to 2d matrix.

3d transformation matrix code example, matrix becomes matrix3d
-Webkit-transform: matrix3d (1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1)

8. ie matrix Filter

The ie matrix filter can only be rotated and stretched. The specific method is as follows:

Filter: progid: DXImageTransform. microsoft. matrix (enabled = bEnabled, SizingMethod = sMethod, FilterType = sType, Dx = fDx, Dy = fDy, M11 = fM11, M12 = fM12, M21 = fM21, M22 = fM22)
M11, M12, M21, and M22 correspond to a, c, B, and d in the 2d matrix respectively.
So the rotation implementation is:

M11 = cos (roation), M12 =-sin (roation), M21 = sin (roation), M22 = cos (roation)

The corresponding code in ie7 is:

Filter: progid: DXImageTransform. microsoft. matrix (enabled = bEnabled, SizingMethod = 'Auto expand', FilterType = sType, M11 = 0.53, M12 =-0.85, M21 = 0.85, M22 = 0.53)

2 'ie7 scaling implementation:

Filter: progid: DXImageTransform. microsoft. matrix (Enabled = benabled, sizingmethod = 'Auto expand', filtertype = stype, M11 = 1.5, M12 = 0, m21 = 0, m22 = 1.5)

Other transformations can be considered ....

Turn: http://mdc.sohu.com /? P = 1413