With CSS3 conversion, we are able to move, scale, rotate, lengthen, or stretch elements.
Here is the 2D conversion
1 translate ()
By the translate () method, the element moves from its current position, based on the given
Left (x-coordinate) and top (y-coordinate) positional parameters:
Transform:translate (50px,100px) moves the element from the left to 50 pixels, moving 100 pixels from the top.
2 Rotate ()
The element rotates the given angle clockwise by the rotate () method. Negative values are allowed, and the elements rotate counterclockwise.
Transform:rotate (30deg); rotate the element clockwise by 30 degrees.
3 scale ()
With the scale () method, the dimensions of the element are increased or decreased, depending on the given width (X-axis) and height (Y-axis) Parameters:
Transform:scale (2,4); Converts the width to twice times the original size and converts the height to 4 times times the original height.
4 Skew ()
By the skew () method, the element flips the given angle, according to the given horizontal line (X axis) and vertical (Y-axis) Parameters:
Transform:skew (30deg,20deg); Flips the element around the X-axis by 30 degrees and flips 20 degrees around the Y-axis.
5 matrix ()
The matrix () method combines all 2D conversion methods.
Matrix (A,b,c,d,tx,ty) method requires six parameters
A, C, B, D is a two-dimensional matrix:
┌┐
│a b│
│c d│
└┘
TX, Ty is just repositioning elements based on the x and Y coordinates.
6 transform applies 2D or 3D transformations to the element.
7transform-origin changes the position of the element being converted.
CSS3 2D Conversion