`matrix3d()` CSS function

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since July 2015.

Learn more
See full compatibility

The matrix3d() CSS function defines a 3D transformation as a 4x4 homogeneous matrix. Its result is a <transform-function> data type.

Try it

transform: matrix3d(
  -0.6,
  1.34788,
  0,
  0,
  -2.34788,
  -0.6,
  0,
  0,
  0,
  0,
  1,
  0,
  0,
  0,
  10,
  1
);

transform: matrix3d(
  0.5,
  0,
  -0.866025,
  0,
  0.595877,
  1.2,
  -1.03209,
  0,
  0.866025,
  0,
  0.5,
  0,
  25.9808,
  0,
  15,
  1
);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

css

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

Values

The matrix3d() function is specified with 16 values. They are described in the column-major order.

a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3: Are <number>s describing the linear transformation.
a4 b4 c4 d4: Are <number>s describing the translation to apply.

Cartesian coordinates on ^2	Homogeneous coordinates on ^2	Cartesian coordinates on ^3	Homogeneous coordinates on ^3
This transformation applies to the 3D space and can't be represented on the plane.		A generic 3D affine transformation can't be represented using a Cartesian-coordinate matrix, as translations are not linear transformations.	(a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4)\left( \begin{array}{cccc} a1 & a2 & a3 & a4 \\ b1 & b2 & b3 & b4 \\ c1 & c2 & c3 & c4 \\ d1 & d2 & d3 & d4 \\ \end{array} \right)

Formal syntax

<matrix3d()> = 
  matrix3d( <number>#{16} )

This syntax reflects the latest standard as per CSS Transforms Module Level 2. Not all browsers may have implemented every part. See Browser compatibility for support information.

Examples

Cube squashing example

The following example shows a 3D cube created from DOM elements and transforms, which can be hovered/focused to apply a matrix3d() transform to it.

HTML

html

<section id="example-element" tabindex="0">
  <div class="face front">1</div>
  <div class="face back">2</div>
  <div class="face right">3</div>
  <div class="face left">4</div>
  <div class="face top">5</div>
  <div class="face bottom">6</div>
</section>

CSS

css

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
  margin: 50px auto;
}

#example-element:hover,
#example-element: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);
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 70%);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 70%);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 70%);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 70%);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 70%);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 70%);
  transform: rotateX(-90deg) translateZ(50px);
}

Result

Matrix translation and scale example

Another transform3d() example, which implements an animated combined translate and scale.

HTML

html

<div class="foo">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quaerat sit
  soluta, quisquam exercitationem delectus qui unde in facere necessitatibus aut
  quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
</div>

CSS

css

html {
  width: 100%;
}
body {
  height: 100vh;
  /* Centering content */
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
}
.foo {
  width: 50%;
  padding: 1em;
  color: white;
  background: #ff8c66;
  border: 2px dashed black;
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  /* Setting up animation for better demonstration */
  animation: MotionScale 2s alternate linear infinite;
}

@keyframes MotionScale {
  0% {
    /*
      Identity matrix is used as basis here.
      The matrix below describes the
      following transformations:
        Translates every X point by -50px
        Translates every Y point by -100px
        Translates every Z point by 0
        Scales down by 10%
    */
    /* prettier-ignore */
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      -50, -100, 0, 1.1
    );
  }
  50% {
    /* prettier-ignore */
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 0.9
    );
  }
  100% {
    /* prettier-ignore */
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      50, 100, 0, 1.1
    )
  }
}

Result

Specifications

Specification
CSS Transforms Module Level 2 # funcdef-matrix3d

Browser compatibility

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on Apr 18, 2026 by MDN contributors.

View this page on GitHub Report a problem with this content

`matrix3d()` CSS function

In this article

Try it

Syntax

Values

Formal syntax

Examples

Cube squashing example

HTML

CSS

Result

Matrix translation and scale example

HTML

CSS

Result

Specifications

Browser compatibility

See also

Help improve MDN

matrix3d() CSS function

In this article

HTML

CSS

Result

HTML

CSS

Result

Help improve MDN

`matrix3d()` CSS function