CSS3 2D Transform

CSS3, the most commonly used 2D static transformations have 5 kinds, they are included in the Transform method

* Translate ()

* Rotate ()

* Scale ()

* Skew ()

* Matrix ()

Let's introduce

Translate () method

With the translate () method, the element is shifted from its current position according to the 2 parameters (x-coordinate, y-coordinate) that are passed in.

Example: Transform (50px,100px)//element left offset 50px, offset downward 100px

Rotate () method

By the Rotate () method, the element rotates the angle specified by the parameter clockwise, and if the parameter is passed in as a negative value, the element rotates counterclockwise.

Example: Transform:rotate (30DEG); The element rotates 30 degrees clockwise.

Transform:rotate (30DEG); The element rotates 30 degrees counterclockwise.

Scale () method

With the scale () method, the dimension of the element is increased or decreased, and varies depending on the width and height multiples of the parameters passed in.

For example: Transform:scale (2,4); The element width is converted to twice times the original scale, and the height is converted to 4 times times the original height.

Skew () method

With the skew () method, the element flips the given angle, flipping through the horizontal (x-axis) and vertical lines (y-axes) passed in by the parameter.

For example: Transfrom:skew (30DEG,20DEG); Element flips 30 degrees around the x-axis bar element and flips 20 degrees around the y-axis.

Matrix () method

The matrix () method essentially is to combine the above rotation, scaling, displacement, and skew methods in an element. It requires elements to be passed into 6 parameters.

CSS3 2D Transform