CSS - scaleZ()

Quiz

The scaleZ() function in CSS is used to apply a scaling transformation (resizing) to an element along the z-axis. The result is a <transform-function> datatype.

The function modifies the z-coordinate of each element point by a constant factor, other than 1. When the scale factor is 1, the function gets identity transform. scaleZ(-1) specifies an axial symmetry, where the z-axis passes through the transform origin.

Possible values

The function scaleZ() accepts a single parameter.

s: A number, representing the scaling factor to be applied on the z-coordinate of each point of the element.

Syntax

transform: scaleZ(s);

CSS scaleZ() - Positive and Negative Values

Following is an example of scaleZ() function with positive and negative values as parameter:

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: cyan;
      border: 2px solid black;
   }

   .scale-z-positive {
      background-color: pink;
      transform: perspective(800px) scaleZ(2) translateZ(-100px);
   }

   .scale-z-negative {
      background-color: lightgreen;
      transform: perspective(800px) scaleZ(-0.5) translateZ(-100px);
   }
</style>
</head>
<body>
   <section>
      <p>No function</p>
      <div></div>
   </section>
   
   <section>
      <p>+ve scaleZ()+translateZ()</p>
      <div class="scale-z-positive"></div>
   </section>
   
   <section>
      <p>-ve scaleZ()+translateZ()</p>
      <div class="scale-z-negative"></div>
   </section>
</body>
</html>

Print Page