A scale transform the element by using z-axis with CSS3

The scaleZ(z) method is used to scale transform the element using Z-axis.

Let us see the syntax −


Here, z is a number representing the scaling factor to apply on the z-coordinate of each point of the element.

Let us see an example −

div {
   width: 60px;
   height: 60px;
   background-color: black;
.perspective {
   transform: perspective(200px) translateZ(-150px);
   background-color: yellow;
.scaled-translated {
   transform: perspective(200px) scaleZ(2) translateZ(-150px);
   background-color: orange;