Open In App

CSS 2D Transforms

Improve
Improve
Like Article
Like
Save
Share
Report

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=
             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=
             alt="GFG" />
</body>
 
</html>


Output:

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=
             alt="GFG" />
</body>
 
</html>


Output:

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=
             alt="GFG" />
</body>
 
</html>


Output: 

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=
             alt="GFG" />
</body>
 
</html>


Output:

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=
             alt="GFG" />
</body>
 
</html>


Output: 

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=
             alt="GFG" />
</body>
 
</html>


Output: 

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=
             alt="GFG" />
</body>
 
</html>


Output: 

Supported Browsers:

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

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



Last Updated : 21 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads