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
Working with CSS3 3D Transform Functions
CSS3 3D transform functions allow you to move, rotate, and scale elements along the x-axis, y-axis, and z-axis in three-dimensional space. These functions provide powerful capabilities for creating depth and perspective effects on web pages.
Syntax
selector {
transform: transform-function(values);
}
3D Transform Functions
| Function | Description |
|---|---|
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Transforms the element using 16 values of 4x4 matrix |
translate3d(x,y,z) |
Moves the element along x-axis, y-axis and z-axis |
translateX(x) |
Moves the element along x-axis |
translateY(y) |
Moves the element along y-axis |
translateZ(z) |
Moves the element along z-axis |
rotate3d(x,y,z,angle) |
Rotates the element in 3D space |
scale3d(x,y,z) |
Scales the element in 3D space |
Example 1: translate3d() Function
The translate3d() function moves an element in 3D space along all three axes −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
perspective: 1000px;
margin: 50px;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
margin: 20px;
transition: transform 0.3s;
}
.translated {
transform: translate3d(50px, 30px, 20px);
background-color: #e74c3c;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Original</div>
<div class="box translated">Translated</div>
</div>
</body>
</html>
Two boxes appear: a blue original box and a red translated box moved 50px right, 30px down, and 20px forward in 3D space.
Example 2: rotate3d() Function
The rotate3d() function rotates an element around a custom 3D axis. The syntax is rotate3d(x, y, z, angle) where x, y, z define the rotation axis −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
perspective: 1000px;
margin: 50px;
}
.box {
width: 120px;
height: 80px;
background-color: #2ecc71;
margin: 30px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.rotated {
transform: rotate3d(1, 1, 0, 45deg);
background-color: #9b59b6;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Original</div>
<div class="box rotated">Rotated 3D</div>
</div>
</body>
</html>
A green original box and a purple box rotated 45 degrees around a diagonal axis (1,1,0) creating a 3D rotation effect.
Example 3: scale3d() Function
The scale3d() function scales an element differently along each axis. Values greater than 1 enlarge, while values less than 1 shrink the element −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
perspective: 1000px;
margin: 50px;
}
.box {
width: 100px;
height: 100px;
background-color: #f39c12;
margin: 30px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.scaled {
transform: scale3d(1.5, 0.8, 2);
background-color: #e67e22;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Original</div>
<div class="box scaled">Scaled 3D</div>
</div>
</body>
</html>
An orange original box and a darker orange scaled box that appears wider (1.5x), shorter (0.8x), and with enhanced depth (2x) due to 3D scaling.
Conclusion
CSS3 3D transform functions enable sophisticated three-dimensional transformations on web elements. Using perspective and these transform functions together creates engaging visual effects and improves user experience through depth and motion.
275 Views
