CSS 2D TRANSFORMS

❮ Prev Next ❯

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

2D transform

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:

CSS translate
CSS rotate
CSS scale
CSS skew
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 );

.my-div{
  transform: translate(100px, 100px);
  -moz-transform: translate(100px, 100px);
}

▶ Run the code

Output:

This div element is translated 50px to right and 50px to bottom by using CSS translate.

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:

This div element is rotated 90deg by using CSS rotate method.

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:

scaled width 1.5× and height 2×.

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:

This div element is skewed 20deg in X and 0deg Y by using CSS skew method.

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:

This div element is using matrix method.

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

❮ Prev Next ❯