Updated June 29, 2023
Introduction to CSS 3D Transforms
Implementing CSS transforms may shift, rotate, slant, squash, and stretch the elements. Web designers will step beyond their display counterparts with CSS 3D transformations and enter a new field of graphic design. The front-end developers will improve their designs with CSS 3D transformations by creating a new dimension to conventional websites.
The transformed item does not impact the corresponding elements but can overlap themselves in the same way as the elements that are completely positioned. Even so, the transformed element still requires more space at its default location in the layout. We can start moving elements to the x-axis, y-axis, and z-axis using 3d transforms.
Note: The transform property of CSS3 uses transform functions to control the coordinate system used by an element to add the transformation effect.
Functions of CSS 3D Transforms
Following are the 3D transformation functions in CSS:
- translate3d(x,y,z): It provides the 3D translation and moves the element along the X, Y, and Z axes.
- translateX(x): It specifies the 3D translation by moving the element along with X-axis.
- translateY(y): It specifies the 3D translation by moving the element along with Y-axis.
- translateZ(z): It specifies the 3D translation by moving the element along with Z-axis.
- scale3d(): It provides the 3D scale translation and scales the element along with the X, Y, and Z axis.
- rotate3D(): It provides the 3D rotation with the specified angle and X, Y, and Z direction.
- matrix3D(): It defines the 4*4 transformation matrix of 16 values.
- perspective(n): It describes a vision of perspective for an element transformed in 3D. In addition, the element will appear further away from the viewer as the value of such a function rises.
Examples of CSS 3D Transforms
We will discuss how to use the above 3D transformations in CSS with the help of the below examples.
Example #1
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS 3D Transform Functions</title>
<style>
.container{
width: 200px;
height: 200px;
perspective: 400px;
border: 1px solid #ffd630;
background: #F5F5F5;
margin: 20px;
}
.transformed {
-webkit-transform: translate3d(30px, 30px, 40px); /* this is for Chrome, Safari, Opera browsers */
transform: translate3d(30px, 30px, 40px); /*this is standard syntax*/
}
</style>
</head>
<body>
<h2>Before Translation:</h2>
<div class="container">
<img src="https://media-exp1.licdn.com/dms/image/C4E0BAQG1578pP8Uvpg/company-logo_200_200/0?e=2159024400&v=beta&t=YN5_sse_NcqIhGzgShohlvBokFuuQ8oXpLNct9bLNA4" alt="Logo">
</div><br>
<h2>After Translation:</h2>
<div class="container">
<img src="https://media-exp1.licdn.com/dms/image/C4E0BAQG1578pP8Uvpg/company-logo_200_200/0?e=2159024400&v=beta&t=YN5_sse_NcqIhGzgShohlvBokFuuQ8oXpLNct9bLNA4" class="transformed" alt="Logo">
</div>
</body>
</html>Output:
In the next examples, use the above steps to display the result of an html page.
Example #2
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS 3D Transform Functions </title>
<style>
div{
width: 180px;
height: 120px;
background-color: #F5F5F5;
border: 1px solid #ffd630;
}
.x_axis {
-webkit-transform: rotateX(150deg); /* this is for Chrome, Safari, Opera browsers */
transform: rotateX(150deg); /*this is standard syntax*/
}
</style>
</head>
<body>
<h1>X-Axis Transform</h1>
<h2>Before Translation:</h2>
<div class="container">
EDUCBA...
</div><br>
<h2>After Translation:</h2>
<div class="x_axis">
EDUCBA...
</div>
</body>
</html>Output
In the above output, the rotateX() function rotates at a given degree through an element of its X-axis:
Example #3
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS 3D Transform Functions </title>
<style>
div{
width: 180px;
height: 120px;
background-color: #F5F5F5;
border: 1px solid #ffd630;
}
.y_axis {
-webkit-transform: rotateY(150deg); /* this is for Chrome, Safari, Opera browsers */
transform: rotateY(150deg); /*this is standard syntax*/
}
</style>
</head>
<body>
<h1>Y-Axis Transform</h1>
<h2>Before Translation:</h2>
<div class="container">
EDUCBA...
</div><br>
<h2>After Translation:</h2>
<div class="y_axis">
EDUCBA...
</div>
</body>
</html>Output:
In the above output, the rotateY() function rotates at a given degree through an element of its Y-axis:
Example #4
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS 3D Transform Functions </title>
<style>
div{
width: 180px;
height: 120px;
background-color: #F5F5F5;
border: 1px solid #ffd630;
}
.z_axis {
-webkit-transform: rotateZ(120deg); /* this is for Chrome, Safari, Opera browsers */
transform: rotateZ(120deg); /*this is standard syntax*/
}
</style>
</head>
<body>
<h1>Z-Axis Transform</h1>
<h2>Before Translation:</h2>
<div class="container">
EDUCBA...
</div><br><br>
<h2>After Translation:</h2><br><br>
<div class="z_axis">
EDUCBA...
</div>
</body>
</html>Output:
In the above output, the rotateZ() function rotates at a given degree through an element of its Z-axis:
Example #5
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS 3D Transform Functions</title>
<style>
.container{
width: 200px;
height: 200px;
perspective: 400px;
border: 1px solid #ffd630;
background: #ffd630;
margin: 20px;
}
.transformed {
-webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* this is for Chrome, Safari, Opera browsers */
transform: scale3d(1, 1, 1) rotate3d(1, 0, 0, 60deg); /*this is standard syntax*/
}
</style>
</head>
<body>
<h1>Scale 3D Transform</h1>
<h2>Before Translation:</h2>
<div class="container">
<img src="https://media-exp1.licdn.com/dms/image/C4E0BAQG1578pP8Uvpg/company-logo_200_200/0?e=2159024400&v=beta&t=YN5_sse_NcqIhGzgShohlvBokFuuQ8oXpLNct9bLNA4" alt="Logo">
</div><br>
<h2>After Translation:</h2>
<div class="container">
<img src="https://media-exp1.licdn.com/dms/image/C4E0BAQG1578pP8Uvpg/company-logo_200_200/0?e=2159024400&v=beta&t=YN5_sse_NcqIhGzgShohlvBokFuuQ8oXpLNct9bLNA4" class="transformed" alt="Logo">
</div>
</body>
</html>Output:
Example #6
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS 3D Transform Functions</title>
<style>
.container{
width: 200px;
height: 200px;
perspective: 400px;
border: 1px solid #ffd630;
background: #ffd630;
margin: 20px;
}
.transformed {
-webkit-transform: rotate3d(0, 1, 0, 60deg); /* this is for Chrome, Safari, Opera browsers */
transform: rotate3d(0, 1, 0, 60deg); /*this is standard syntax*/
}
</style>
</head>
<body>
<h1>Rotate 3D Transform</h1>
<h2>Before Translation:</h2>
<div class="container">
<img src="https://media-exp1.licdn.com/dms/image/C4E0BAQG1578pP8Uvpg/company-logo_200_200/0?e=2159024400&v=beta&t=YN5_sse_NcqIhGzgShohlvBokFuuQ8oXpLNct9bLNA4" alt="Logo">
</div><br>
<h2>After Translation:</h2>
<div class="container">
<img src="https://media-exp1.licdn.com/dms/image/C4E0BAQG1578pP8Uvpg/company-logo_200_200/0?e=2159024400&v=beta&t=YN5_sse_NcqIhGzgShohlvBokFuuQ8oXpLNct9bLNA4" class="transformed" alt="Logo">
</div>
</body>
</html>Output:
Example #7
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS 3D Transform Functions</title>
<style>
.container{
width: 200px;
height: 200px;
perspective: 400px;
border: 1px solid #ffd630;
background: #ffd630;
margin: 20px;
}
.transformed {
-webkit-transform: matrix3d(0.459127, -0.359572, 0.706613, 0, 0.200942, 0.890958, 0.428884, 0, -0.923565, 0, 0.506836, 1, 0, 1, 0, 1); /* this is for Chrome, Safari, Opera browsers */
transform: matrix3d(0.459127, -0.359572, 0.706613, 0, 0.200942, 0.890958, 0.428884, 0, -0.923565, 0, 0.506836, 1, 0, 1, 0, 1); /*this is standard syntax*/
}
</style>
</head>
<body>
<h1>Matrix 3D Transform</h1>
<h2>Before Translation:</h2>
<div class="container">
<img src="https://media-exp1.licdn.com/dms/image/C4E0BAQG1578pP8Uvpg/company-logo_200_200/0?e=2159024400&v=beta&t=YN5_sse_NcqIhGzgShohlvBokFuuQ8oXpLNct9bLNA4" alt="Logo">
</div>
<h2>After Translation:</h2>
<div class="container">
<img src="https://media-exp1.licdn.com/dms/image/C4E0BAQG1578pP8Uvpg/company-logo_200_200/0?e=2159024400&v=beta&t=YN5_sse_NcqIhGzgShohlvBokFuuQ8oXpLNct9bLNA4" class="transformed" alt="Logo">
</div>
</body>
</html>Output:
Example #8
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS 3D Transform Functions </title>
<style>
.class_one {
height: 150px;
width: 150px;
margin-left: 120px;
border: 1px solid blue;
perspective: 120px;
}
.class_two {
padding: 60px;
border: 2px solid #ffd630;
background: #ffd630;
transform-style: preserve-3d;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<h1>Perspective Transform</h1>
<div class="class_one">EDUCBA
<div class="class_two">EDUCBA</div>
</div>
</body>
</html>Output:
Conclusion
In this article, we discussed the significance of 3D transforms using pure CSS Transformations and perspectives directly from the building blocks of 3D structures using CSS. Fortunately, 3D transforms are more valuable and important than CSS exists; the function of CSS is to increase functionality.
Recommended Articles
We hope that this EDUCBA information on “CSS 3D Transforms” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
