matrix3d()
Quick Summary for matrix3d()
The matrix3d() CSS function defines a 3D transformation as a 4x4 homogeneous matrix. Its result is a <transform-function> data type.
Code Usage for matrix3d()
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) 
More Details for matrix3d()

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

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
<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
CSS Transforms Module Level 2 # funcdef-matrix3d

See also

transform <transform-function> Understanding the CSS Transforms Matrix Select your preferred language English (US)Français日本語中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Me
Random CSS Property

:future

The :future CSS pseudo-class selector is a time-dimensional pseudo-class that will match for any element which appears entirely after an element that matches :current. For example in a video with captions which are being displayed by WebVTT.
:future css reference