On the implementation of CSS3 element 2D plane transform attribute transform

The shape transformation of CSS3 allows us to stretch, scale, and so on elements

I'm mainly talking about the 12 D plane transformation.
Property transform can be transformed
Transform is the meaning of metamorphosis.
And it is mainly used by functions, with the following functions

• Translate () Translation transformation

• Ratate () Rotation transformation

• Scale () Scaling transformation

• Skew () Tilt transform

• Matrix transformation

Transform-origin defines the center of the transformation

Translational Transform Translate

Translate () Two parameters, the first one is the x-axis relative displacement, the second parameter is the y-axis relative displacement

. demo {    ...    Transform:translate (100px, 200px);  <--}

or translate () can be split into Translatex () and Translatey ()
(Lowercase form translatex/y can also)

. demo {    ...    Transform:translatex (100px) Translatey (200px); /* Change */}

The two are equivalent, but they're troublesome.
The result is that the element is shifted to the right by 100px and the 200px is shifted downward

Rotary Transform Rotate

Rotate () A parameter that represents the ' xxdeg ' of the rotation angle,
Positive clockwise rotation, negative value allowed

. demo {    ...    Transform:rotate (30deg);}

The result is that the elemental homeopathic needle rotates 30°
But the element's default rotation center is the element center
Modifying the transform center can be used with our Transform-origin property
Let's say we want the element to rotate along the top left vertex

. demo {    ...    Transform:rotate (30deg);    transform-origin:0 0; /* Increment */}

Transform-origin three parameters are x-axis distance (x-axis), y-axis distance (y-axis), z-axis distance (z-axis)
The default form is transform-origin: 50% 50% 0;
X-axis optional values in addition to length and percentage, there are left, center, right
Y-axis optional values in addition to length and percentage, plus top, center, bottom
Z-axis the optional value is only the length value, in the 2D transform we cannot use it temporarily

Zoom Transform Scale

Scaling elements is changing the size of the element
Two parameters, width and height zoom magnification (no units)
can also be split into ScaleX () and ScaleY ()

. demo {    ...    Transform:scale (2,2);}

This is to increase the width of the element by a factor of twice times the height
Note that this is the true meaning of scaling
This means that if you have text in your element, it will have an effect of stretching.
The equivalent form is as follows

. demo {    ...    Transform:scalex (2) ScaleY (3); /* Change */}

Transform Center can be modified by transform-origin

Tilt Transform Skew

Skew is the meaning of tilt and twist.
This function will make your element linearly distorted.
Two parameters, the twist angle of the x-axis and the y-axis, is also the form of xxdeg

. demo {    ...    Transform:skew (10deg,20deg);}

Equivalent

. demo {    ...    Transform:skewx (10deg) skewy (20deg); /* Change */}

You can also modify the transform center by Transform-origin, not repeating

Matrix transformation matrices

Sounds super NB, actually.
It's really super NB.
Matrix transformation is less, it is the basis of all the above transformations
I know it's not so deep
As a student of the math department, I'm really ashamed t^t
The matrix transformation has 6 parameters to control the rotation, panning, skewing, and zooming of elements
For example, the following code rotates the element 30°,x, the y-axis of each shift 20px

. demo {    ...    Transform:matrix (0.866,0.5,-0.5,0.866,20,20);}

If you are interested in math students, I recommend Zhang Xin Asahi great God's article Portal
Maybe I'll write a matrix article on my whim ...

What we're going to talk about today is a little more simple.
3D Transform related properties –> Portal