CSS | 2D Transforms

A transformation modify an element by its shape, size and position. It transforms the elements along the X-axis and Y-axis.
There are six main types of transformation which are listed below:

  • translate()
  • rotate()
  • scale()
  • skewX()
  • skewY()
  • matrix()

The translate() Method: The translate() method is used to move the element from its actual position to along the X-axis and Y-axis.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>2D Transform</title>
        <style>
            .geeks {
                font-size:25px;
                margin:20px 0;
                margin-left:100px;
            }
            
            img { 
                border:1px solid black;
                transition-duration:2s;
                -webkit-transition-duration:2s;
            }
            
            img:hover{
                transform:translate(100px, 100px);
  
                 /* prefix for IE 9 */
                -ms-transform:translate(100px, 100px); 
  
                /* prefix for Safari and Chrome */
                -webkit-transform:translate(100px, 100px); 
          }
            
        </style>
    </head>
    <body>
        <div class = "geeks">Translate() Method</div>
        <img src=
alt=""/>
    </body>
</html>

chevron_right


Output:
image translation

The rotate() Method: The rotate() method rotates an element clockwise or counter-clockwise according to a given degree. The degree is given in the parenthesis.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>2D Transform</title>
    <style>
    img {
        border:1px solid black;
    }
    img:hover {
        -ms-transform: rotate(20deg); /* IE 9 */
        -webkit-transform: rotate(20deg); /* Safari */
        transform: rotate(20deg); /* Standard syntax */
    }
    .geeks {
        font-size:25px;
        text-align:center;
        margin-top:100px;
    }
    </style>
    </head>
    <body>
        <div class = "geeks">Rotation() Method</div>
        <img src=
alt=""/>
    </body>
</html>                    

chevron_right


Output:
rotation



Counter-clock wise rotation: Use negative values to rotate the element counter clockwise.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>2D Transform</title>
    <style>
    img {
        border:1px solid black;
    }
    img:hover {
        -ms-transform: rotate(-20deg); /* IE 9 */
        -webkit-transform: rotate(-20deg); /* Safari */
        transform: rotate(-20deg); /* Standard syntax */
    }
    .geeks {
        font-size:25px;
        text-align:center;
        margin-top:100px;
    }
    </style>
    </head>
    <body>
        <div class = "geeks">Counter-clock Rotate() Method</div>
        <img src=
alt=""/>
    </body>
</html>                    

chevron_right


Output:
counter clock rotation

The scale() Method: It is used to increase or decrease the size of an element according to the parameter given for the width and height.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>2D Transform</title>
    <style>
    img {
        border:1px solid black;
    }
    img:hover {
        -ms-transform: scale(1,2); /* IE 9 */
        -webkit-transform: scale(1,1); /* Safari */
        transform: scale(1,2); /* Standard syntax */
    }
    .geeks {
        font-size:25px;
        text-align:center;
        margin-top:100px;
    }
    </style>
    </head>
    <body>
        <div class = "geeks">Scale() Method</div>
        <img src=
alt=""/>
    </body>
</html>                    

chevron_right


Output:
scalling

Note:The size of elements can be decreases using half of its width and height.

The skewX() Method: This method is used to skew an element in the given angle along the X-axis.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>2D Transform</title>
    <style>
    img {
        border:1px solid black;
    }
    img:hover {
        -ms-transform: skewX(20deg); /* IE 9 */
        -webkit-transform: skewX(20deg); /* Safari */
        transform: skewX(20deg); /* Standard syntax */
    }
    .geeks {
        font-size:25px;
        text-align:center;
        margin-top:100px;
    }
    </style>
    </head>
    <body>
        <div class = "geeks">skewX() Method</div>
        <img src=
alt=""/>
    </body>
</html>                    

chevron_right


Output:
skewX

The skewY() Method: This method is used to skew an element in the given angle along the Y-axis.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>2D Transform</title>
    <style>
    img {
        border:1px solid black;
    }
    img:hover {
        -ms-transform: skewY(20deg); /* IE 9 */
        -webkit-transform: skewY(20deg); /* Safari */
        transform: skewY(20deg); /* Standard syntax */
    }
    .geeks {
        font-size:25px;
        text-align:center;
        margin-top:100px;
    }
    </style>
    </head>
    <body>
        <div class = "geeks">skewY() Method</div>
        <img src=
alt=""/>
    </body>
</html>                    

chevron_right


Output:
skewy image

The skew() Method: This method skews an element in the given angle along the X-axis and the Y-axis. The following example skews the element 20 degrees along the X-axis, and 10 degrees along the Y-axis:
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>2D Transform</title>
    <style>
    img {
        border:1px solid black;
    }
    img:hover {
        -ms-transform: skew(20deg,10deg); /* IE 9 */
    -webkit-transform: skew(20deg,10deg); /* Safari */
    transform: skew(20deg,10deg); /* Standard syntax */
    }
    .geeks {
        font-size:25px;
        text-align:center;
        margin-top:100px;
    }
    </style>
    </head>
    <body>
        <div class = "geeks">skew() Method</div>
        <img src=
alt=""/>
    </body>
</html>                    

chevron_right


Output:
skew image

The matrix() Method: This method combines all the 2D transform property into a single property. The matrix transform property accepts six parameters as given below:
matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>2D Transform</title>
    <style>
    img {
        border:1px solid black;
    }
    img:hover {
        -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
        -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
        transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */
    }
    .geeks {
        font-size:25px;
        text-align:center;
        margin-top:100px;
    }
    </style>
    </head>
    <body>
        <div class = "geeks">matrix() Method</div>
        <img src=
alt=""/>
    </body>
</html>                    

chevron_right


Output:
matrix method



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.