matrix3d() CSS Function

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The CSS matrix3d() function defines a 3D transformation as a 4x4 homogeneous matrix. It can be used to rotate, scale, translate, and skewer elements in three dimensions.

The matrix3d() function takes 16 parameters, which are arranged in four rows of four columns. The first three rows represent the linear transformation, and the last row represents the translation.

The following is a brief description of each parameter:

  • a1, b1, c1, d1: These parameters represent the first row of the matrix, and they control the rotation and scaling of the element on the x-axis.
  • a2, b2, c2, d2: These parameters represent the second row of the matrix, and they control the rotation and scaling of the element on the y-axis.
  • a3, b3, c3, d3: These parameters represent the third row of the matrix, and they control the rotation and scaling of the element on the z-axis.
  • a4, b4, c4, d4: These parameters represent the fourth row of the matrix, and they control the translation of the element on the x, y, and z-axes.

The matrix3d() function can be used to create a wide variety of 3D effects, such as:

  • Rotating an element around any axis.
  • Scaling an element up or down in any dimension.
  • Translating an element in any direction.
  • Skewing an element to create a distorted or warped effect.

Here is an example of how to use the matrix3d() function to rotate an element 45 degrees around the y-axis:

div {
  transform: matrix3d(1, 0, 0, 0, 0, 0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1);
}

The matrix3d() function is a powerful tool for creating 3D effects on the web. It can be used to create everything from simple animations to complex interactive scenes.

Syntax

transform: matrix3d( <number> [, <number> ]{15,15} );
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

Values

  • <number>:The matrix3d() function accepts the following sixteen parameters:
    • a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 - These arguments are a <number>: that describe the linear transformation.
    • a4 b4 c4 d4 - These arguments are a <number>: that describe the translation to apply.

Example

<div class="normal rotated">Rotated</div>
<div class="normal">Not rotated</div>
.normal {
padding: 20px;
margin: 20px;
width: 120px;
background: #546D62;
color: white;
font-family: sans-serif;
}
.rotated {
transform: matrix3d(0.583333, 0.186887, 0.79044, 0, -0.52022, 0.833333, 0.186887, 0, -0.623773, -0.52022, 0.583333, 0, 0, 0, 0, 1);
}

Browser Support

The following table will show you the current browser support for the CSS matrix3d() function.

Desktop
Edge Chrome Firefox Opera Safari
121210154
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
1810143.213

Last updated by CSSPortal on: 7th October 2023