scaleZ() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The scaleZ() CSS function is part of the 3D transform functions that allow elements to be scaled along the Z-axis, which represents the depth dimension in a 3D space. Unlike scaleX() and scaleY(), which scale elements horizontally and vertically, scaleZ() affects the perceived size of an element moving toward or away from the viewer. Positive values enlarge the element in the Z-axis direction, making it appear closer, while values between 0 and 1 shrink it, creating the effect of moving farther away. A value of 1 leaves the element at its original depth.

Using scaleZ() is typically combined with other 3D transformations, such as translate3d() or rotateY(), to create more dynamic 3D effects. To achieve visible 3D scaling, the parent element often needs perspective applied, which controls the intensity of the depth effect.

For example, scaling a div along the Z-axis:

div {
  transform: scaleZ(1.5);
  perspective: 500px;
}

In this example, the div appears 1.5 times closer to the viewer, creating a pronounced 3D effect. Combining scaleZ() with other functions like rotateX() or translateZ() can simulate realistic depth movement in interactive UI components or 3D animations.

This function is particularly useful in 3D card flips, virtual galleries, and any effect where depth perception enhances the user experience.

Syntax

scaleZ() = transform: scaleZ(<number>);

Values

<number>The value is a positive or negative number.
- a value greater than 1 (for example: 1.5) increases the scale;
- a value less than 1 (for example: 0.8) reduces the scale;
- a value of 1 leaves the element size unchanged and does not give a visible effect.

Example

HTML

<div class="scene">

  <div class="box">

    <div class="face front">Front</div>

    <div class="face back">Back</div>

  </div>

</div>

CSS

/* 1. Setup the 3D Scene */

.scene {

  width: 200px;

  height: 200px;

  perspective: 600px; /* Crucial for 3D effects */

  margin: 100px auto;

}



/* 2. Create the Box */

.box {

  width: 100%;

  height: 100%;

  position: relative;

  transform-style: preserve-3d;

  transition: transform 1s;

  

  /* Apply scaleZ and rotate so we can actually see the depth */

  transform: rotateY(45deg) scaleZ(3); 

}



/* 3. Style the faces to show depth */

.face {

  position: absolute;

  width: 200px;

  height: 200px;

  line-height: 200px;

  text-align: center;

  font-weight: bold;

  border: 2px solid black;

}



.front {

  background: rgba(255, 0, 0, 0.5);

  transform: translateZ(50px); /* Move forward */

}



.back {

  background: rgba(0, 0, 255, 0.5);

  transform: translateZ(-50px); /* Move backward */

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS scaleZ() function. Hover over a browser icon to see the version that first introduced support for this CSS function.