Computer >> Computer tutorials >  >> Programming >> CSS

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 −

scaleZ(z)

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