Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Methods of 3D transforms with CSS3
CSS 3D transforms allow you to manipulate elements in three-dimensional space using the transform property. These methods enable translation, rotation, and scaling along the x, y, and z axes to create depth and perspective effects.
Syntax
selector {
transform: transform-function(values);
transform-style: preserve-3d; /* Optional: preserves 3D space for child elements */
}
3D Transform Methods
| Method | Description |
|---|---|
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Transforms element using 16 values of a 4x4 matrix |
translate3d(x,y,z) |
Moves element along x, y, and z axes simultaneously |
translateX(x) |
Moves element along the x-axis |
translateY(y) |
Moves element along the y-axis |
translateZ(z) |
Moves element along the z-axis (depth) |
scale3d(x,y,z) |
Scales element along x, y, and z axes |
scaleX(x) |
Scales element along the x-axis |
scaleY(y) |
Scales element along the y-axis |
scaleZ(z) |
Scales element along the z-axis |
rotateX(angle) |
Rotates element around the x-axis |
rotateY(angle) |
Rotates element around the y-axis |
rotateZ(angle) |
Rotates element around the z-axis |
rotate3d(x,y,z,angle) |
Rotates element around a custom 3D vector |
Example: 3D Cube with Multiple Transforms
The following example demonstrates various 3D transform methods applied to different faces of a cube −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
perspective: 800px;
display: flex;
justify-content: space-around;
align-items: center;
height: 300px;
background: #f0f0f0;
}
.cube {
width: 100px;
height: 100px;
background: #3498db;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.translate3d { transform: translate3d(20px, 10px, 30px); }
.rotateX { transform: rotateX(45deg); }
.rotateY { transform: rotateY(45deg); }
.rotateZ { transform: rotateZ(45deg); }
.scale3d { transform: scale3d(1.2, 0.8, 1.5); }
</style>
</head>
<body>
<div class="container">
<div class="cube translate3d">translate3d</div>
<div class="cube rotateX">rotateX</div>
<div class="cube rotateY">rotateY</div>
<div class="cube rotateZ">rotateZ</div>
<div class="cube scale3d">scale3d</div>
</div>
</body>
</html>
Five blue cubes appear in a row, each demonstrating different 3D transforms: one moved in 3D space, three rotated around different axes, and one scaled with different proportions along each axis.
Conclusion
CSS 3D transforms provide powerful methods to create depth and dimension in web layouts. Combined with perspective, these transforms enable realistic 3D effects and animations in browsers.
Updated on: 2026-03-15T12:22:12+05:30
85 Views
Advertisements