CSS matrix3d() Function

Definition and Usage

CSS's matrix3d() The function defines a 3D transformation by using a 4x4 matrix containing 16 values:

Instance

Example 1

Using matrix3d() 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

Example 2

Using matrix3d() Create a 3D transformation for another <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

CSS Syntax

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

Technical Details

Browser Support

The numbers in the table indicate the browser version that first fully supports this function.

Related Pages

Reference:CSS transform attribute

Reference:CSS matrix() function

Tutorial:CSS 3D Transformations