CSS 2D Transforms

Last Updated : 11 Jul, 2025

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

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

We will implement all these functions & will understand their concepts through the examples.

translate() Method:

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

Example: This example describes the CSS translate() method to modify the position of an element from its actual position.

HTML 
<!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=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png" 
             alt="GFG" /> 
</body>

</html>

Output:

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: This example describes the CSS rotate() method to rotate an element clockwise or counterclockwise.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>2D Transform</title>
    <style>
    img {
        border: 1px solid black;
    }
    
    img:hover {
        
        /* IE 9 */
        -ms-transform: rotate(20deg);
        
        /* Safari */
        -webkit-transform: rotate(20deg);
        
        /* Standard syntax */
        transform: rotate(20deg);
    }
    
    .geeks {
        font-size: 25px;
        text-align: center;
        margin-top: 100px;
    }
    </style>
</head>

<body>
    <div class="geeks">Rotation() Method</div>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png" 
             alt="GFG" />
</body>

</html>

Output:

output2

Counter-clockwise rotation

Use negative values to rotate the element counter clockwise.

Example: This example describes the CSS Counter-clock rotate() method to rotate an element clockwise using the negative values.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>2D Transform</title>
    <style>
    img {
        border: 1px solid black;
    }
    
    img:hover {
        /* IE 9 */
        -ms-transform: rotate(-20deg);
        
        /* Safari */
        -webkit-transform: rotate(-20deg);
        
        /* Standard syntax */
        transform: rotate(-20deg);
    }
    
    .geeks {
        font-size: 25px;
        text-align: center;
        margin-top: 100px;
    }
    </style>
</head>

<body>
    <div class="geeks">Counter-clock Rotate() Method</div> 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png" 
             alt="GFG" /> 
</body>

</html>

Output:

output3

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: This example describes the CSS scale() method to resize the element according to their width & height.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>2D Transform</title>
    <style>
    img {
        border: 1px solid black;
    }
    
    img:hover {
        /* IE 9 */
        -ms-transform: scale(1, 2);
        /* Safari */
        -webkit-transform: scale(1, 1);
        /* Standard syntax */
        transform: scale(1, 2);
    }
    
    .geeks {
        font-size: 25px;
        text-align: center;
        margin-top: 100px;
    }
    </style>
</head>

<body>
    <div class="geeks">Scale() Method</div> 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png" 
             alt="GFG" />
</body>

</html>

Output: 

output4

Note: The size of elements can be decreased using half of their width and height.

skewX() Method:

This method is used to skew an element in the given angle along the X-axis.

Example: This example describes the CSS skewX() method to skew the element in X-axis.

HTML 
<!DOCTYPE html>
<html>

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

<body>
    <div class="geeks">skewX() Method</div> 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png" 
             alt="GFG" /> 
</body>

</html>

Output:

output5

skewY() Method

This method is used to skew an element in the given angle along the Y-axis.

Example: This example describes the CSS skewY() method to skew the element in Y-axis.

HTML 
<!DOCTYPE html>
<html>

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

<body>
    <div class="geeks">skewY() Method</div> 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png" 
             alt="GFG" /> 
</body>

</html>

Output: 

output6

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: This example describes the CSS skew() method to skew an element in the given angle along the X-axis and the Y-axis.

HTML 
<!DOCTYPE html>
<html>

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

<body>
    <div class="geeks">skew() Method</div>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png" 
             alt="GFG" />
</body>

</html>

Output: 

output7

matrix() Method

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

Example: This example describes the CSS matrix() method to combine all the 2D transform properties into a single property.

HTML 
<!DOCTYPE html>
<html>

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

<body>
    <div class="geeks">matrix() Method</div>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png" 
             alt="GFG" /> 
</body>

</html>

Output: 

output8

Supported Browsers:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari

Note: Internet Explorer does not support the global values initial and unset.

Comment
Article Tags:
Misc
Web Technologies
CSS
CSS-Advanced

Explore