Tutorialspoint.dev

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:

<!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>

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:

<!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>                    

Output:
rotation



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

<!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>                    

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:

<!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>                    

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:

<!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>                    

Output:
skewX

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

<!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>                    

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:

<!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>                    

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:

<!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>                    

Output:
matrix method



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter