Skip to content
Related Articles

Related Articles

Improve Article

CSS | transform Property

  • Last Updated : 30 Jan, 2019

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.

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

Syntax:

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

Values:

ValueDescription
noneNo transformation takes place.
matrix(x, x, x, x, x, x)Specifies a matrix transformation of 2-D type. It takes 6 values.
matrix3d(x, x, x, x, x, x, x, x, x)Specifies a matrix transformation of 3-D type. It takes 9 values.
translate(x, y)Specifies a translation across the X and Y axes.
translate3d(x, y, z)Specifies a translation across the X, Y and the Z axes.
translateX(x)Specifies the translation across the X-axis only.
translateY(y)Specifies the translation across the Y-axis only.
translateZ(z)Specifies the translation across the Z-axis only.
rotate(angle)Specifies the angle of rotation.
rotateX(angle)Specifies the rotation along the X-axis corresponding to the angle of rotation.
roatateY(angle)Specifies the rotation along the Y-axis corresponding to the angle of rotation.
roteteZ(angle)Specifies the rotation along the Z-axis corresponding to the angle of rotation.
scale(x, y)Specifies the scale transformation along the X and Y axes.
scale3d(x, y, z)Specifies the scale transformation along the X, Y and Z axes.
scaleX(x)Specifies the scale transformation along the X-axis.
scaleY(y)Specifies the scale transformation along the Y-axis.
scaleZ(z)Specifies the scale transformation along the Z-axis.
scale3d(x, y, z)Specifies the scale transformation along the X, Y and Z axes.
skew(angle, angle)Specifies the skew transformation along the X and Y axes corresponding the skew angles.
skewX(angle)Specifies the skew transformation along the X-axis corresponding to the skew angle.
skewY(angle)Specifies the skew transformation along the Y-axis corresponding to the skew angle.
skewZ(angle)Specifies the skew transformation along the Z-axis corresponding to the skew angle.
perspective(x)Specifies the perspective of an element. refer: Perspective property
initialInitializes the element to its default value.
inheritInherits the value from its parent element.

Example 1: Without the transform property.






<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <style
            .main { 
                display: grid; 
                padding: 30px; 
                background-color: green; 
              
            
            .GFG { 
                text-align: center; 
                font-size: 35px; 
                background-color: white;
                color: green; 
            
        </style
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>                    

Output:

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




<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>                    

Output:

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




<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>    

Output:

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




<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

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






<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

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




<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

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




<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

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




<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

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




<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

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






<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

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




<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

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




<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

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




<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

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




<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

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






<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

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




<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

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




<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

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




<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

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




<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

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






<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

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




<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

Example 22: This example describes initial property value.




<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <style
            .main { 
                display: grid;  
                padding: 30px; 
                background-color: green; 
              
            
            .GFG { 
                text-align: center; 
                font-size: 35px; 
                background-color: white;
                color: green;
                transform: initial; 
            
        </style
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

Output:

Example 23: This example describes inherit property value.




<!DOCTYPE html> 
<html
    <head
        <title
            CSS Transform Property 
        </title
          
        <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
    </head
      
    <body
        <div class = "main"
            <div class = "GFG">GeeksForGeeks</div
        </div
    </body
</html>

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-



My Personal Notes arrow_drop_up
Recommended Articles
Page :