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 );
.my-div {
transform: translate(100px, 100px);
-moz-transform: translate(100px, 100px);
}
▶ Run the code
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
);
.my-div {
transform: rotate( 90deg);
-moz-transform: rotate( 90deg);
}
▶ Run the code
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 );
.my-div {
transform: scale( 1.5,2);
-moz-transform: scale( 1.5,2);
}
▶
Run the code
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 );
.my-div {
transform: skew( 20deg, 0deg);
-moz-transform: scale( 20deg,0deg);
}
▶
Run the code
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()
);
.my-div {
transform: matrix( 1.2,0, 1,1.5,100,50);
-moz-transform: matrix( 1.2,0, 1,1.5,100,50);
}
▶ Run the code
Output: