CSS 2D TRANSFORMS

Using CSS3 2D transform feature HTML elements can be scaled, skewed, moved, translated and rotated in 2-dimensional shape.

A transformed element doesn't affect the surrounding element, it gets overlapped over them. The space taken by a transformed element is the same space when it's not transformed.

There are following CSS 2D transformation methods that can be applied over HTMl elements are as follows:

1. CSS translate
2. CSS rotate
3. CSS scale
4. CSS skew
5. CSS matrix

1.) CSS translate

The CSS translate() method is used to translate or move an HTML element on the scale of x and y coordinate.

The translate() takes two argument x and y. The arguments values x and y could be negative also.
Example - transform: translate( x,y );

Output:

2.) CSS rotate

The CSS rotate() method is used to rotate the HTML element clockwise or anticlockwise.

The rotate() takes argument in degree. The argument values can be negative as well as positive. Positive value rotates the element in clockwise whereas negative value rotates element in anticlockwise direction.
Example - transform: rotate( 20deg ); or transform: rotate( -20deg );

Output:

3.) CSS scale

The CSS scale() method is used to increase or decrease size of element on the basic parameter given in scale().

The scale() takes two arguments in numbers one for width and one for height.
Example - transform: scale( width,height );

Output:

4.) CSS skew

The CSS skew() method is used to skew the element on the x and y axis.

The skew() takes two arguments in degree one for x and one for y.
Example - transform: skew( Xdeg,Ydeg );

Output:

5.) CSS matrix

The CSS matrix method is a combination of all methods.

The 2D matrix method takes six arguments.
Example - transform: matrix( scaleX(),skewY(),skewX(),scaleY(),translateX(),translateX() );

Output: