# matrix3d() CSS Function

### 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 {
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 12 12 10 15 4
 Tablets / Mobile 18 10 14 3.2 1 3

Last updated by CSSPortal on: 7th October 2023