Open In App

CSS transform Property

Last Updated : 04 Jan, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

The transform property in CSS is used to change the coordinate space of the visual formatting model. This is used to add effects like skew, rotate, translate, etc on elements.

Try It:

Rotate 45deg
Scale 1.2
Translate 10px, 10px
Skew 30deg, 20deg
See the Changes

Currently Active Property:

transform: rotate(45deg); 

Syntax:

transform: none|transform-functions|initial|inherit;

Note: The transformations can be of 2-D or 3-D type.

Values:

  • none: No transformation takes place.
  • matrix(x, x, x, x, x, x): It specifies a matrix transformation of 2-D type. It takes 6 values.
  • matrix3d(x, x, x, x, x, x, x, x, x): It specifies a matrix transformation of 3-D type. It takes 9 values.
  • translate(x, y): It specifies a translation across the X and Y axes.
  • translate3d(x, y, z): It specifies a translation across the X, Y, and Z axes.
  • translateX(x): It specifies the translation across the X-axis only.
  • translateY(y): It specifies the translation across the Y-axis only.
  • translateZ(z): It specifies the translation across the Z-axis only.
  • rotate(angle): It specifies the angle of rotation.
  • rotateX(angle): It specifies the rotation along with the X-axis corresponding to the angle of rotation.
  • rotateY(angle): It specifies the rotation along with the Y-axis corresponding to the angle of rotation.
  • rotateZ(angle): It specifies the rotation along with the Z-axis corresponding to the angle of rotation.
  • scale(x, y): It specifies the scale transformation along the X and Y axes.
  • scaleX(x): It specifies the scale transformation along the X-axis.
  • scaleY(y): It specifies the scale transformation along the Y-axis.
  • scaleZ(z): It specifies the scale transformation along the Z-axis.
  • scale3d(x, y, z): It specifies the scale transformation along the X, Y, and Z axes.
  • skew(angle, angle): It specifies the skew transformation along the X and Y axes corresponding to the skew angles.
  • skewX(angle): It specifies the skew transformation along with the X-axis corresponding to the skew angle.
  • skewY(angle): It specifies the skew transformation along with the Y-axis corresponding to the skew angle.
  • skewZ(angle): It specifies the skew transformation along with the Z-axis corresponding to the skew angle.
  • perspective(x): It specifies the perspective of an element. Refer: Perspective property
  • initial: It initializes the element to its default value.
  • inherit: It inherits the value from its parent element.

Example 1: Without the transform property.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
    }
    </style>

<!--Driver Code Starts{-->
</head>

<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 2: This example describes Matrix() property value. 

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: matrix(1, 0, -1, 1, 1, 0);
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 3: This example describes Matrix3d() property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
        transform-style: preserve-3d;
    }
    
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform-style: preserve-3d;
        position: absolute;
        transform: translate(150px, 75%, 5em)
    }
    </style>

<!--Driver Code Starts{-->
</head>

<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 4: This example describes translate() property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: translate(150px, 65%);
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 5: This example describes translate3d() property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: translate(150px, 65%, 5em);
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 6: This example describes translateX() property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: translateX(150px);
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 7: This example describes translateY() property value. 

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: translateY(150px);
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 8: This example describes translateZ() property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: translateZ(150px);
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 9: This example describes rotate() property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: rotate(45deg);
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 10: This example describes rotateX() property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: rotateX(75deg);
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 11: This example describes rotateY() property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: rotateY(75deg);
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output: 

Example 12: This example describes rotateZ() property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: rotateZ(75deg);
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 13: This example describes scale() property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: scale(1, 2);
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 14: This example describes scale3d() property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: scale3d(2, 1, 5);
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 15: This example describes scaleX() property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: scaleX(2);
    }
    </style>

<!--Driver Code Starts{-->
</head>

<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 16: This example describes scaleY() property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: scaleY(2);
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 17: This example describes scaleZ() property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: scaleZ(2);
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 18: This example describes skew() property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: skew(30deg, 30deg);
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 19: This example describes skewX() property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: skewX(30deg);
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 20: This example describes skewY() property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: skewY(30deg);
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 21: This example describes perspective() property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: perspective(30px);
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 22: This example describes the initial property value.

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: initial;
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Example 23: This example describes inherit property value. 

HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
        transform: rotateX(45deg);
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: inherit;
    }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

Output:

Note: Sometimes the 3-D values don’t give the correct output when they are used on 2-D elements, Hence it is not recommended to use 3-D values for 2-D elements. 

Supported Browsers: The browser supported by transform property are listed below:

  • 2-D Transforms: 
    • Chrome 36.0, 4.0 -webkit-
    • Edge 10.0, 9.0 -ms-
    • Firefox 16.0, 3.5 -moz-
    • Safari 9.0, 3.2 -webkit-
    • Opera 23.0, 15.0 -webkit-, 10.5 -o-
  • 3-D Transforms: 
    • Chrome 36.0, 12.0 -webkit-
    • Edge 12.0
    • Firefox 10.0
    • Safari 9.0, 4.0 -webkit-
    • Opera 23.0, 15.0 -webkit-


Next Article

Similar Reads