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