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:

css scaleZ example

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>
      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);}
   <h2>Without scaleZ()</h2>
   <div class="a"></div>

   <div class="b"></div>

   <div class="c"></div>

   <div class="d"></div>

   <div class="e"></div>

Without scaleZ()





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 »

Liked this post? Share it!