Web/CSS/transform-function/matrix3d()

From Get docs


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

Syntax

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)

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.

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. <math display="inline">\begin{pmatrix} 
& & & \\
& & & \\
& & & \\
& & & \\

\end{pmatrix}</math>

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

<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

#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);
}

Result


Matrix translation and scale example

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

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

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 Status Comment
CSS Transforms Level 2The definition of 'matrix3d()' in that specification. Editor's Draft Initial definition

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
<transform-function> Chrome

Full support 1

Edge

Full support 12

Firefox Full support 3.5

Notes'

Full support 3.5

Notes'

Notes' Firefox 14 removed experimental support for skew(), but it was reintroduced in Firefox 15. Notes' Before Firefox 16, the translation values of matrix() and matrix3d() could be <length>s, in addition to the standard <number>.

IE Full support 9

Notes'

Full support 9

Notes'

Notes' Internet Explorer 9 supports 2D but not 3D transforms. In version 9, mixing 2D and 3D transform functions invalidates the entire property.

Opera

Full support 10.5

Safari

Full support 3.1

WebView Android

Full support 2

Chrome Android

Full support 18

Firefox Android

Full support 4

Opera Android

Full support 11

Safari iOS

Full support 3.2

Samsung Internet Android

Full support 1.0

3D support Chrome

Full support 12

Edge

Full support 12

Firefox

Full support 10

IE

Full support 10

Opera

Full support 15

Safari

Full support 4

WebView Android

Full support 3

Chrome Android

Full support 18

Firefox Android

Full support 10

Opera Android

Full support 14

Safari iOS

Full support 3.2

Samsung Internet Android

Full support 1.0

Legend

Full support  
Full support
See implementation notes.'
See implementation notes.


See also

Retrieved from "https://getdocs.org/index.php?title=Web/CSS/transform-function/matrix3d()&oldid=21643"
Powered by MediaWiki