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
?	?	?	?	?	?
Tablets / Mobile
?	?	?	?	?	?

Last updated by CSSPortal on: 1st December 2019