Matrix3D() CSS Function of the Transform Property

Video Tutoral at https://youtu.be/kR4_IWzL168

The matrix3d() CSS function of the transform property defines a 3D transformation as a 4 x 4 homogeneous matrix. It contains 16 parameters like scaleX, scaleY, scaleZ, shearZX, perspectiveX, translateX, and so on.

►The scaleX will scale the element toward the X direction. In other words, it represents the scaleX() which is also used in the matrix() CSS function.

►The ShearYX shears an element by moving the element toward the Y direction and expanding toward the X direction. In other words, it represents the skewY() which is also used in the matrix() CSS function.

►The shearZX parameter shears an element by moving the element toward the Z direction and expanding toward the X direction.

►Perspective X. It supports the negative value.

►The shearXY parameter shears an element by moving the element toward the X direction and expanding toward the Y direction. In other words, it represents the skewX() which is also used in the matrix() CSS function.

►The ScaleY scales the element toward the Y direction. In other words, it represents the scaleY() which is also used in the matrix() CSS function.

►The shearZY parameter shears an element by moving the element toward the Z direction and expanding toward the Y direction.

►Perspective Y. It supports the negative values.

►The shearXZ parameter shears an element by moving the element toward the X direction and expanding toward the Z direction.

►The shearYZ parameter shears an element by moving the element toward the Y direction and expanding toward the Z direction.

►The ScaleZ scales toward the Z direction.

►Perspective Z. It supports the negative values.

►Translate X Y and Z. The translations of X and Y are also being used in the matrix() CSS function.

►PerspectiveScale. It doesn't support the negative values.

Use the code below to learn more.

<!DOCTYPE html>
<html>
<head>
   <style>
html {
  height: 100%;
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  min-height: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
  box-sizing: inherit;
}

  .threeD {
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  rotate: 1 -1 0 -30deg;
  scale: 0.6 0.6 0.6;
  transition: 3s ease all;
}  

.threeD:hover {
  transform: matrix3d(  1, 0, 0, 0,
                                  0, 1, 0, -0.005,
                                  0, 0, 1, 0,
                                  0, 0, 0, 1
                                 )
}

 .area {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.8;
  color: white;
  font-size: 10em;
  display: grid;
  align-items: center;
  text-align: center;
  border: solid 20px #2effea;
  }

.front {
  transform: translate3d(0, 0, 1.2in);
  background: #ff2ed9;
}

.back {
  transform:  translateZ(-120px) rotateY(180deg);
  background: #c02eff;
}

.left {
  right: 80px;
  transform: rotateY(270deg);
  background: #f5ff2e;
}

.right {
  left: 120px;
  transform: rotateY(90deg);
  background: #ffab2e;
}

.top {
  bottom: 80px;
  transform: rotateX(90deg);
  background: blue;
}

.bottom {
  top: 120px;
  transform:  rotateZ(180deg) rotateX(90deg);
  background: #34eb7d;
}

  </style>
</head>

<body>
<div class="threeD"> 
<div class="area front">1</div>  
<div class="area back">2</div>
<div class="area left">3</div> 
<div class="area right">4</div> 
<div class="area top">5</div>
<div class="area bottom">6</div>  
</div>
</body>

</html>