CSS matrix3d() Function
Example
Use matrix3d() to define a 3D transformation for a <div> element:
.div1 {
transform: matrix3d(
0.7, 0.1, 0.7,
0,
-0.6, 0.7, 0.2, 0,
-0.5,
-0.8, 0.7, 0,
10, 10, 0, 1
);
font-size: 30px;
font-weight: bold;
width: 280px;
padding: 10px;
background: beige;
font-family: verdana;
border: 1px solid green;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS matrix3d() function defines a 3D
transformation, using a 4x4 matrix of 16 values:
| matrix3d() = |
|
| Version: | CSS Transforms Module Level 2 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| matrix3d() | 12 | 12 | 10 | 4 | 15 |
CSS Syntax
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3,
b3, c3, d3, a4, b4, c4, d4)
| Value | Description |
|---|---|
| a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 | Required. Numbers that defines the linear transformation |
| a4 b4 c4 d4 | Required. Numbers that defines the transformation to apply |
More Examples
Example
Use matrix3d() to create another 3D transformation for a <div> element:
.div1 {
font-size: 30px;
font-weight: bold;
width: 280px;
height: 40px;
padding: 10px;
background: beige;
font-family: verdana;
border: 1px
solid green;
transform-style: preserve-3d;
transition:
transform 1.5s;
transform: rotate3d(1, 1, 1, 30deg);
margin: 50px auto;
}
.div1:hover,
.div1:focus {
transform: rotate3d(1, 1, 1, 30deg)
matrix3d(1, 0, 0, 0, 0, 1, 6,
0, 0, 0, 1, 0, 50, 100, 0, 1.1);
}
Try it Yourself »
Related Pages
CSS reference: CSS transform property.
CSS reference: CSS matrix() function.
CSS tutorial: CSS 3D transforms.
