CSS transform Property - GeeksforGeeks

01 Nov, 2021
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.
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.
roatateY(angle): It specifies the rotation along with the Y-axis corresponding to the angle of rotation.
roteteZ(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.
scale3d(x, y, z): It specifies the scale transformation along the X, Y, and Z 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
<!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. 
HTML
<!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.
HTML
<!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.
HTML
<!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.
HTML
<!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.
HTML
<!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. 
HTML
<!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.
HTML
<!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.
HTML
<!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.
HTML
<!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.
HTML
<!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.
HTML
<!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.
HTML
<!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.
HTML
<!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.
HTML
<!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.
HTML
<!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.
HTML
<!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.
HTML
<!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.
HTML
<!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.
HTML
<!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.
HTML
<!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 the initial property value.
HTML
<!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. 
HTML
<!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-
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.0Firefox 10.0Safari 9.0, 4.0 -webkit-Opera 23.0, 15.0 -webkit-
Chrome 36.0, 12.0 -webkit-
Edge 12.0
Firefox 10.0
Safari 9.0, 4.0 -webkit-
Opera 23.0, 15.0 -webkit-
bhaskargeeksforgeeks
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?