CSS transform: scaleZ()

The CSS scaleZ() function is used to define the transform property, to scale (stretch/contract or resize) an element on z-axis, in similar way as of scaleX().

The problem with me while trying to teach you the actual work of scaleZ() function is, I can't show you the effect of it, on the plane surface. Therefore, I've created a 3D box to first show you, how the function is used to scale a 3D box or an element on the z-axis, as shown in the snapshot given below:

Therefore, we need to take the help of perspective() function to move the view front or back from the z=0 plane. Also the rotateY() function to rotate an element along y-axis. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 120px; background: peru; margin: auto;}
      .a{transform: perspective(400px) rotateY(-45deg);}
      .b{transform: perspective(400px) scaleZ(0.2) rotateY(-45deg);}
      .c{transform: perspective(400px) scaleZ(0.5) rotateY(-45deg);}
      .d{transform: perspective(400px) scaleZ(1) rotateY(-45deg);}
      .e{transform: perspective(400px) scaleZ(3) rotateY(-45deg);}
   </style>
</head>
<body>
   
   <h2>Without scaleZ()</h2>
   <div class="a"></div>

   <h2>scaleZ(0.2)</h2>
   <div class="b"></div>

   <h2>scaleZ(0.5)</h2>
   <div class="c"></div>

   <h2>scaleZ(1)</h2>
   <div class="d"></div>

   <h2>scaleZ(3)</h2>
   <div class="e"></div>
   
</body>
</html>

Output

Without scaleZ()

scaleZ(0.2)

scaleZ(0.5)

scaleZ(1)

scaleZ(3)

CSS scaleZ() Syntax

The syntax of scaleZ() function in CSS, is:

transform: scaleZ(val);

The value of val may be a positive, zero, or a negative number. The scaleZ(1) is used, not to scale an element on z-axis, or the element will be in its original length on z-axis.

CSS Online Test

« Previous Tutorial Next Tutorial »