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


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

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


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.
Note: Until Firefox 16, Gecko accepted a <length> value for a4, b4 and c4.
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


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.


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


#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: rgba(90,90,90,.7);
    transform: translateZ(50px);

.back {
    background: rgba(0,210,0,.7);
    transform: rotateY(180deg) translateZ(50px);

.right {
  background: rgba(210,0,0,.7);
  transform: rotateY(90deg) translateZ(50px);

.left {
  background: rgba(0,0,210,.7);
  transform: rotateY(-90deg) translateZ(50px);

.top {
  background: rgba(210,210,0,.7);
  transform: rotateX(90deg) translateZ(50px);

.bottom {
  background: rgba(210,0,210,.7);
  transform: rotateX(-90deg) translateZ(50px);


Matrix translation and scale example

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


<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?


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(

  50% {
    transform: matrix3d(
  to {
     transform: matrix3d(



Specification Status Comment
CSS Transforms Level 2
The definition of 'matrix3d()' in that specification.
Editor's Draft Initial definition

Browser compatibility

BCD tables only load in the browser

See also