Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of what the matrix of transform in CSS3 is, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value, I believe you will have something to gain after reading this CSS3 matrix of transform. Let's take a look at it.

Preface

Elements can be transformed using transform in CSS3. It includes: displacement, rotation, offset, scaling. Transform can use translate/rotate/skew/scale to control element transformation, or matrix to control element transformation.

For example:

Transform through the transform property.

First demonstrate how to use translate/rotate/skew/scale:

.box {

Width: 100px

Height: 100px

Background: # 00C487

Transform: translate (10px, 20px) rotate (30deg) scale (1.5,2)

}

You can also use the matrix method:

.box {

Width: 100px

Height: 100px

Background: # 00C487

Transform: matrix (0.75,0.8,0.8,1.2,10,20)

}

View demo

The Chinese word for Matrix is matrix, which is a mathematical term. In computer science, matrices are used to transform objects. In the transform attribute of CSS3, matrices can be used to transform images.

What does the matrix look like?

The matrix can be divided into an adjective + a name, moment is an adjective and matrix is a noun.

If you like to watch war movies, whether it is ancient or modern wars, you need to have a formation. To fight without formation is tantamount to playing hooligans; or to open a game of pesticides, you may also have to consider the positions of various heroes. All kinds of ball games and all kinds of chess games need to have formation.

Each individual in the formation will have an impact on the whole. For example, when hitting Arena of Valor Sagittarius, Sagittarius should output in one position, stand in the wrong position and lose the whole game.

Well, in fact, a matrix is a column of numbers arranged in a rectangle.

In mathematics, a matrix is wrapped in square brackets.

The picture above is a matrix.

How does the matrix in CSS3 correspond to the matrix?

Why do you use a matrix to represent a transformation? Because in computer science, matrices can transform vectors. Every number in the matrix will have an impact on the transformation of the vector.

In CSS3, you can use matrices to represent 2D and 3D conversions. Here we only talk about 2D.

Selector {

Transform: matrix (a, b, c, d, e, f)

}

The conversion of 2D is represented by a matrix of 3-3, and the first two rows represent the values of the conversion, respectively, a b c d e f, note that they are arranged vertically, the first row represents the change in the x-axis, the second row represents the change in the y-axis, and the third row represents the change in the z-axis, because here 2D does not involve the z-axis, so here is 0 01.

Suppose a question

Create a div,div with a width and height of 200px with a red dot in it and the location is {x:181px y:50px}.

If you translate the div to the right 10pxMagneol x axis down 20px, rotate 37 °, x axis zoom 1.5x, y axis zoom 2x:

Transform: translate (10px, 20px) rotate (37deg) scale (1.5,2)

So where is the position after the change of the red dot?

Now that we know that a matrix can transform a vector, we just need to convert the above information into matrix information, through which our original coordinates can be converted to new coordinates.

Scale scale (x, y)

The scaling corresponds to the scaling ratio of the an in the matrix and the scaling ratio of the dline x axis corresponding to the scaling ratio of the aforce y axis corresponding to d.

Transform: scale (XQuery y)

Axix dumby

So the matrix corresponding to scale (1.5,2) is:

Transform: matrix (1.5,0,0,2,0,0)

If there is no element that has not been scaled, the default is axi1diter1.

Translate translate (10,20)

Translation corresponds to e and f in the matrix, and x and y of translation correspond to e and f, respectively.

Transform: translate (10,20)

EBay 10

Fidel20

Corresponding: transform: matrix (a, b, c, D10,20)

Combined scaling: transform: matrix (1.50,0,2,10,20)

Translation affects only the e and f values.

Rotate rotate (θ deg)

Rotation affects the four values of a/b/c/d. What are they?

Transform: rotate (θ deg)

A=cos θ

B=sin θ

C=-sin θ

D=cos θ

This is from high school.

To calculate the sin value of 30 °:

First of all, we have to convert 30 °into radians and pass it to the trigonometric function to calculate. Using JS to calculate is what it looks like.

/ / conversion formula between Radian and Angle: Radian = π / 180 × angle

Const radian = Math.PI / 180 * 30 / / calculate radians

Const sin = Math.sin (radian) / / calculate sin θ

Const cos = Math.cos (radian) / / calculate cos θ

Console.log (sin, cos) / / output ≈ 0.5,0.866

So we calculate sin and cos, which are 0.5 and 0.866, respectively.

If we do not consider scaling and offset, and only rotate 30 °, the matrix should be expressed as

Transform: rotate (30deg)

Astatine 0.866

Baked 0.5

Cymbal color 0.5

Dice 0.866

Transform: matrix (0, 0.866,-0, 0.866, 0, 0)

This is the end of the article on "what is the matrix of transform in CSS3?" Thank you for reading! I believe you all have a certain understanding of the knowledge of "what is the matrix of transform in CSS3". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.