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
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 );
Example
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 );
Example
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 );
Example
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 );
Example
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() );
Example
Output: