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
Transform the element by using 16 values of matrix with CSS3
The CSS matrix3d() function is used to transform HTML elements in 3D space using a 4x4 transformation matrix with 16 values. This powerful function allows you to perform complex 3D transformations including rotation, scaling, skewing, and translation all in one declaration.
Syntax
transform: matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4);
Parameters
| Values | Description |
|---|---|
| a1, b1, c1, d1 | First row of the 4x4 matrix − controls X-axis scaling and rotation |
| a2, b2, c2, d2 | Second row of the 4x4 matrix − controls Y-axis scaling and rotation |
| a3, b3, c3, d3 | Third row of the 4x4 matrix − controls Z-axis scaling and rotation |
| a4, b4, c4, d4 | Fourth row of the 4x4 matrix − controls translation (movement) and perspective |
Example: Basic 3D Matrix Transformation
The following example applies a 3D matrix transformation to rotate and scale a box −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
perspective: 1000px;
padding: 100px;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
margin: 50px auto;
transform: matrix3d(
0.8, 0.3, 0, 0,
-0.3, 0.8, 0, 0,
0, 0, 1, 0,
50, 20, 0, 1
);
transition: transform 0.3s;
}
.box:hover {
transform: matrix3d(
1.2, 0.5, 0, 0,
-0.5, 1.2, 0, 0,
0, 0, 1, 0,
100, 50, 0, 1
);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
A blue box appears rotated and scaled using the 3D matrix. On hover, it transforms to a different rotation, scale, and position with a smooth transition effect.
Example: Identity Matrix
An identity matrix leaves the element unchanged and serves as a baseline for transformations −
<!DOCTYPE html>
<html>
<head>
<style>
.identity-box {
width: 120px;
height: 80px;
background-color: #e74c3c;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 30px auto;
transform: matrix3d(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
);
}
</style>
</head>
<body>
<div class="identity-box">Identity Matrix</div>
</body>
</html>
A red box with white text "Identity Matrix" appears in its normal position without any transformation applied.
Key Points
- The
matrix3d()function requires exactly 16 numerical values - Values are arranged in column-major order representing a 4x4 matrix
- The fourth column (a4, b4, c4, d4) controls translation along X, Y, Z axes and perspective
- Use
perspectiveproperty on parent container for 3D effects to be visible
Conclusion
The matrix3d() function provides precise control over 3D transformations using 16 matrix values. While complex, it offers the ultimate flexibility for creating sophisticated 3D effects when simpler transform functions aren't sufficient.
Updated on: 2026-03-15T12:18:41+05:30
276 Views
Advertisements