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

matrix3d()

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

Are <number>s describing the linear transformation.

Are <number>s describing the translation to apply.

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.

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

#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? </div> 

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

Specifications

See also