matrix3d() CSS Function

Description

The matrix3d() function can be used with CSS transforms to style elements in a three-dimensional space.

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

Desktop
Explorer Edge Chrome Firefox Opera Safari
??????
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
??????