2D Conversion in CSS3

With CSS3 conversion, we are able to move, scale, rotate, lengthen, or stretch elements.

Transformations are an effect that changes the shape, size, and position of an element.

Note: Internet Explorer 10, Firefox, and Opera support the Transform property.

Chrome and Safari need a prefix of-webkit-.

The Transform property has the following four values:

1,translate ()

With the translate (px, px) method, the element moves from its current position, based on the given left (x-coordinate) and top (y-coordinate) positional parameters.

2,rotate ()

The element rotates the given angle clockwise through the rotate (deg) method. Negative values are allowed, and the elements rotate counterclockwise.

3,scale ()

With the scale (N,n) method, the dimension of the element is increased or decreased, based on the given width (X-axis) and height (Y-axis) parameters. The element size is enlarged and shrunk.

4,skew ()

Through the skew (deg, deg) method, the element flips the given angle, based on the given horizontal line (X axis) and vertical (Y-axis) parameters.

2D Conversion in CSS3