CSS Function - matrix3d()

The CSS function matrix3d() is similar to the matrix() function, but specifies a 3D transformation represented by a homogeneous 4x4 matrix, resulting in a data type of <transform-matrix>.

Possible values

  • a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 - These are <number>s describing the linear transformation.

  • a4 b4 c4 d4 - These are <number>s describing the translation to apply.

Syntax

The matrix3d() function is defined with 16 values described in column-major order.

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

Each parameter (a1 through d4) corresponds to a specific value in the 4x4 matrix, representing a 3D transformation.

  • ai (where i is the row number and ranges from 1 to 4): Represents the elements in the ith row of the matrix.

  • bi (where i is the row number and ranges from 1 to 4): Represents the elements in the ith row of the matrix.

  • ci (where i is the row number and ranges from 1 to 4): Represents the elements in the ith row of the matrix.

  • di (where i is the row number and ranges from 1 to 4): Represents the elements in the ith row of the matrix.

CSS matrix3d() - Basic example

The following example demonstrates the usage of matrix3d() and also demonstrates a dynamic animation involving both translation and scaling effects

<html>
<head>
<style>
   html {
      width: 100%;
   }
   body {
      height: 100vh;
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-content: center;
   }
   .box {
      width: 150px;
      height: 150px;
      background: #FFAC1C;
      border-radius: 20px;
      text-align: center;
      line-height: 150px;
      color: white;
      font-family: Arial, sans-serif;
      font-size: 18px;
      animation: RotateScale 2s alternate linear infinite;
   }
   @keyframes RotateScale {
      from {
      transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 1
      );
      }
      to {
      transform: matrix3d(
      1.2, 0, 0, 0,
      0, 1.2, 0, 0,
      0, 0, 1.2, 0,
      0, 0, 0, 1
      );
      }
   }
</style>
</head>
<body>
<div class="box">
   matrix3d() example
</div>
</body>
</html>

CSS matrix3d() - 3d Cube

The example demonstrates a 3d cube made from DOM elements and transformations. It can be interactively transformed using matrix3d() when hovered or focused.

<html>
<head>
<style>
   #custom-cube {
      width: 150px;
      height: 150px;
      transform-style: preserve-3d;
      transition: transform 1s;
      transform: rotate3d(1, 1, 1, 45deg);
      margin: 50px auto;
   }
   #custom-cube:hover,
   #custom-cube:focus {
      transform: rotate3d(1, 1, 1, 45deg) matrix3d(
      1,
      0,
      0,
      0,
      0,
      1,
      6,
      0,
      0,
      0,
      1,
      0,
      50,
      100,
      0,
      1.2
      );
   }
   .face {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      position: absolute;
      backface-visibility: inherit;
      font-size: 40px;
      color: #fff;
   }
   .front {
      background: rgba(255, 99, 71, 0.9);
      transform: translateZ(75px);
   }
   .back {
      background: rgba(0, 128, 0, 0.9);
      transform: rotateY(180deg) translateZ(75px);
   }
   .right {
      background: rgba(255, 165, 0, 0.9);
      transform: rotateY(90deg) translateZ(75px);
   }
   .left {
      background: rgba(0, 0, 255, 0.9);
      transform: rotateY(-90deg) translateZ(75px);
   }
   .top {
      background: rgba(218, 112, 214, 0.9);
      transform: rotateX(90deg) translateZ(75px);
   }
   .bottom {
      background: rgba(255, 0, 255, 0.9);
      transform: rotateX(-90deg) translateZ(75px);
   }
</style>
</head>
<body>
   <section id="custom-cube" tabindex="0">
         <div class="face front"> Face A</div>
         <div class="face back">Face B</div>
         <div class="face right">Face C</div>
         <div class="face left">Face D</div>
         <div class="face top">Face E</div>
         <div class="face bottom">Face F</div>
   </section>
</body>
</html>
Advertisements