matrix3d()
==========

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

Try it
------

Syntax
------

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


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

### Values

*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.
  | 

(

a1

a2

a3

a4

b1

b2

b3

b4

c1

c2

c3

c4

d1

d2

d3

d4

)

 |

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: #fff;
}

.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 {
  from {
    /\*
 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%
 \*/
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      -50, -100, 0, 1.1
    );
  }
  50% {
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 0.9
    );
  }
  to {
     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
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `transform`
* Individual transform properties:
    + `translate`
    + `scale`
    + `rotate`
* `<transform-function>`
* Understanding the CSS Transforms Matrix (2012)