CSS scaleZ() Function

CSS scaleZ() Function

The CSS scaleZ() function scales an element's coordinates along the Z axis in three-dimensional space.

It is used with the transform property and accepts one scaling factor. Unlike scaleX() and scaleY(), which directly change an element's visible width or height, scaleZ() changes depth coordinates and is most useful with perspective, three-dimensional translations, rotations, and transformed child elements.

Syntax

transform: scaleZ(sz);

The scaleZ() function accepts one scaling factor that controls coordinates along the depth axis.

For example:

transform: scaleZ(1);
transform: scaleZ(1.5);
transform: scaleZ(0.5);
transform: scaleZ(2);
transform: scaleZ(-1);

A factor of 1 leaves Z coordinates unchanged. Values greater than 1 increase their distance from the transform origin, while values between 0 and 1 reduce that distance.

Negative values reverse the direction of Z coordinates relative to the transform origin.

For example:

transform: scaleZ(2);

This doubles the element's Z coordinates relative to its transform origin. It does not directly double the element's visible width or height.

The function returns a CSS <transform-function> value and is commonly used within the transform property.

Parameters

The scaleZ() function accepts one required parameter.

The established syntax uses a unitless <number>. CSS Transforms Level 2 also defines percentage scaling factors, although support for that newer syntax may vary.

For example:

.box {
  transform: scaleZ(1.5);
}

This multiplies the element's Z coordinates by 1.5 relative to its transform origin.

Length values such as 20px, 2em, and 1rem are invalid scaling factors.

For broad browser compatibility, unitless numbers are the preferred form.

How It Works

The scaleZ() function multiplies coordinates along the Z axis while leaving the X and Y scaling factors unchanged.

For example:

.box {
  width: 100px;
  height: 80px;
  transform: scaleZ(2);
}

A flat element positioned entirely at Z = 0 generally appears unchanged because multiplying zero by two still produces zero.

The element remains 100px wide and 80px high.

To make the effect visible, combine Z-axis scaling with a depth translation and perspective:

.box {
  transform: perspective(500px) scaleZ(2) translateZ(60px);
}

The translateZ(60px) function moves the element 60px toward the viewer. The scaleZ(2) function doubles that displacement to 120px before perspective is applied.

As a result, the element appears larger because it is projected from a position closer to the viewer.

Like other CSS transforms, scaleZ() changes rendered coordinates without changing the space reserved for the element in normal document flow.

Scaling Factors

The scaling factor controls the distance of Z coordinates from the transform origin.

For example, consider a point with a Z coordinate of 50px relative to the transform origin:

scaleZ(0.5)  /* Z becomes 25px */
scaleZ(1)    /* Z remains 50px */
scaleZ(2)    /* Z becomes 100px */
scaleZ(-1)   /* Z becomes -50px */

The visible result depends on the element's geometry, perspective, and any other transformations applied.

Unlike scaleX() or scaleY(), changing the Z factor does not automatically change the visible size of a flat element.

Understanding Depth Scaling

CSS three-dimensional transformations use three perpendicular axes.

• X axis: Runs horizontally across the screen.
• Y axis: Runs vertically down the screen.
• Z axis: Extends toward and away from the viewer.

Positive Z coordinates generally move content toward the viewer, while negative coordinates move it farther away.

The scaleZ() function changes these depth coordinates relative to the transform origin.

Increasing Depth

.box {
  transform: scaleZ(2) translateZ(50px);
}

The translation initially introduces a positive 50px Z coordinate. Scaling doubles the resulting displacement to 100px.

Reducing Depth

.box {
  transform: scaleZ(0.5) translateZ(50px);
}

The resulting depth displacement becomes 25px.

No Depth Displacement

.box {
  transform: scaleZ(2);
}

For a flat element with no Z displacement and a default transform origin, this transformation has no visible effect.

The distinction is important: scaleZ() scales depth coordinates, not the CSS width or height properties.

Negative Scaling Values

Negative scaling factors reverse Z coordinates relative to the transform origin.

For example:

.box {
  transform: scaleZ(-1) translateZ(50px);
}

The original positive 50px depth displacement becomes negative 50px.

With perspective, this moves the resulting position farther from the viewer instead of closer.

Negative factors can also change the magnitude of the depth displacement:

.box {
  transform: scaleZ(-1.5) translateZ(50px);
}

This produces a Z displacement of -75px.

A negative Z-axis scale is different from a horizontal or vertical mirror effect.

For example, scaleX(-1) reflects an element horizontally, while scaleY(-1) reflects it vertically. The scaleZ(-1) function reverses depth coordinates instead.

The effect becomes more noticeable when the element has three-dimensional geometry or is combined with other transforms.

Perspective and Depth

Perspective makes objects closer to the viewer appear larger and objects farther away appear smaller.

It can be applied using the perspective property on a parent element or the perspective() function in a transform list.

Using the Perspective Property

.scene {
  perspective: 500px;
}
.box {
  transform: scaleZ(2) translateZ(60px);
}

The translation creates a 60px depth displacement. The scaling doubles that displacement to 120px, and the parent's perspective projects the element from its resulting position.

Using the Perspective Function

.box {
  transform: perspective(500px) scaleZ(2) translateZ(60px);
}

This places perspective directly in the element's transform list.

The order is important because transform functions are composed in the order written, with the rightmost function acting first on the element's coordinates.

Perspective Does Not Create Depth

Consider the following:

.box {
  transform: perspective(500px) scaleZ(2);
}

If the element is flat and has no Z displacement, it may look unchanged.

Perspective changes how existing depth coordinates are projected. It does not automatically give a flat element thickness.

To create a visible depth effect, combine scaling with translateZ(), three-dimensional rotation, or elements positioned at different depths.

Transform Origin

The transform-origin property determines the reference point around which scaling occurs.

Its default value is:

transform-origin: 50% 50% 0;

For scaleZ(), the third value is especially important because it specifies the Z coordinate of the transform origin.

Default Z Origin

.box {
  transform-origin: center center 0;
  transform: scaleZ(2);
}

A flat element positioned at Z = 0 generally remains visually unchanged because its depth coordinates are already on the transform-origin plane.

Custom Z Origin

.box {
  transform-origin: center center 50px;
  transform: scaleZ(2);
}

The transformation now scales relative to a point 50px along the Z axis.

For a flat element initially at Z = 0, this produces a resulting depth position of -50px relative to its original plane.

With perspective, the element can appear smaller because it has moved farther from the viewer.

Negative Z Origin

.box {
  transform-origin: center center -50px;
  transform: scaleZ(2);
}

For a flat element initially at Z = 0, the resulting depth position becomes +50px.

With perspective, the element can appear larger because it has moved toward the viewer.

The third transform-origin value must be a length, not a percentage.

Preserving Three-Dimensional Space

The transform-style property controls whether an element's transformed children remain positioned in three-dimensional space or are flattened into a plane.

To preserve the depth arrangement of child elements, use:

.object {
  transform-style: preserve-3d;
}

For example:

.scene {
  perspective: 600px;
}
.object {
  position: relative;
  transform-style: preserve-3d;
  transform: scaleZ(1.5) rotateY(25deg);
}
.object .front {
  transform: translateZ(40px);
}
.object .back {
  transform: rotateY(180deg) translateZ(40px);
}

The child elements are positioned at different depths. The parent transformation can change their three-dimensional arrangement.

Without transform-style: preserve-3d, nested elements may be flattened before the parent's transformation is applied.

Some CSS properties, including certain clipping, opacity, and filtering settings, can force flattening even when preserve-3d is specified.

For simple elements without three-dimensional children, preserve-3d is usually unnecessary.

Combining Transforms

The scaleZ() function can be combined with other transform functions in a single declaration.

Scaling and Translation

.box {
  transform: scaleZ(2) translateZ(50px);
}

The resulting depth displacement is 100px because the Z-axis scaling factor also affects the translation.

Scaling and Rotation

.box {
  transform: rotateY(30deg) scaleZ(1.5);
}

The rotation changes the element's orientation in three-dimensional space. The scaling factor controls its Z coordinates before the rotation is applied.

Scaling, Translation, and Perspective

.box {
  transform: perspective(600px) scaleZ(1.5) translateZ(80px);
}

The element is translated 80px along the Z axis, scaled to a 120px depth displacement, and then projected using perspective.

Transform Order

Changing the order of transformations can produce different results.

.first {
  transform: translateZ(50px) scaleZ(2);
}
.second {
  transform: scaleZ(2) translateZ(50px);
}

For a flat element at Z = 0, the first declaration produces a 50px depth displacement, while the second produces a 100px displacement.

In the first declaration, the scaling occurs before the translation. In the second, the translation occurs before the scaling.

Keep transform order deliberate when combining three-dimensional functions.

Related Scaling Functions

CSS provides several functions for scaling elements along different axes.

The following declarations produce equivalent Z-axis scaling:

transform: scaleZ(2);
transform: scale3d(1, 1, 2);

Both declarations multiply Z coordinates by 2 while leaving the X and Y scaling factors unchanged.

CSS also provides an individual scale property:

.box {
  scale: 1 1 2;
}

This specifies three-dimensional scaling independently of the transform property.

Use scaleZ() when only the depth scaling factor needs to change within a transform list.

Example

The following example compares an element with normal depth displacement to one whose Z coordinate is doubled using scaleZ().

HTML:

<div class="scalez-demo">
  <div class="scalez-item">
    <div class="scalez-box normal">Z = 1</div>
  </div>
  <div class="scalez-item">
    <div class="scalez-box enlarged">Z = 2</div>
  </div>
</div>

CSS:

.scalez-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 30px 15px;
}
.scalez-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 150px;
  perspective: 500px;
  background-color: #f1f1f1;
}
.scalez-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  color: #fff;
  background-color: #3498db;
}
.normal {
  transform: scaleZ(1) translateZ(60px);
}
.enlarged {
  transform: scaleZ(2) translateZ(60px);
}

Both boxes begin with a 60px Z-axis translation. The first retains that displacement, while the second doubles it to 120px.

Because the parent containers apply perspective, the second box appears larger even though its X and Y scaling factors remain unchanged.

This demonstrates that scaleZ() changes depth coordinates rather than directly changing the element's CSS width or height.

Negative Depth Example

The following example compares positive and negative Z-axis scaling factors.

HTML:

<div class="depth-demo">
  <div class="depth-item">
    <div class="depth-box positive">Positive</div>
  </div>
  <div class="depth-item">
    <div class="depth-box negative">Negative</div>
  </div>
</div>

CSS:

.depth-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 30px 15px;
}
.depth-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 150px;
  perspective: 500px;
  background-color: #f1f1f1;
}
.depth-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  color: #fff;
  background-color: #3498db;
}
.positive {
  transform: scaleZ(1) translateZ(80px);
}
.negative {
  transform: scaleZ(-1) translateZ(80px);
}

The first box has a positive 80px depth displacement and appears closer to the viewer.

The second box has a negative 80px displacement and appears farther away.

Both elements retain the same original dimensions. Their different apparent sizes result from perspective projection.

Transform Origin Example

The following example demonstrates how changing the Z coordinate of the transform origin affects depth scaling.

HTML:

<div class="origin-demo">
  <div class="origin-item">
    <div class="origin-box origin-default">Z = 0</div>
  </div>
  <div class="origin-item">
    <div class="origin-box origin-offset">Z = -50px</div>
  </div>
</div>

CSS:

.origin-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 30px 15px;
}
.origin-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 150px;
  perspective: 500px;
  background-color: #f1f1f1;
}
.origin-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85px;
  height: 70px;
  color: #fff;
  background-color: #3498db;
  transform: scaleZ(2);
}
.origin-default {
  transform-origin: center center 0;
}
.origin-offset {
  transform-origin: center center -50px;
}

The first box uses a Z-axis origin of zero. Because it is flat and has no initial depth displacement, the scaling does not visibly change its size.

The second box uses a Z-axis origin of -50px. Scaling relative to that origin moves the element to a positive depth position of 50px.

With perspective, the second box appears larger because it is projected from a position closer to the viewer.

Transitions and Animations

The scaleZ() function can be animated using CSS transitions and keyframe animations.

To create a visible effect, use it with depth displacement, perspective, or three-dimensional geometry.

Depth Scaling Transition

.scene {
  perspective: 600px;
}
.card {
  transform: scaleZ(1) translateZ(50px);
  transition: transform 0.4s ease;
}
.card:hover,
.card:focus-visible {
  transform: scaleZ(2) translateZ(50px);
}

The element begins with a 50px depth displacement. On hover or keyboard focus, the Z-axis scaling factor doubles the displacement to 100px.

Perspective makes the change visible as an apparent increase in size.

Three-Dimensional Animation

@keyframes depth-pulse {
  0%, 100% {
    transform: scaleZ(1) translateZ(40px);
  }
  50% {
    transform: scaleZ(2) translateZ(40px);
  }
}
.scene {
  perspective: 600px;
}
.animated-box {
  animation: depth-pulse 2s ease-in-out infinite;
}

The animation changes the element's depth displacement from 40px to 80px and back again.

The perspective projection makes the element appear to move closer to and farther from the viewer.

Reduced Motion

Depth animations and apparent zooming can cause discomfort for some users. Respect the prefers-reduced-motion media feature.

@media (prefers-reduced-motion: reduce) {
  .animated-box {
    animation: none;
  }
  .card {
    transition: none;
  }
}

This removes the continuous animation and disables the transition for users who request reduced motion.

Common Uses

The scaleZ() function is useful when an interface or graphic contains meaningful three-dimensional depth.

• Three-dimensional objects: Adjust the depth coordinates of transformed geometry.
• Perspective effects: Change the apparent size of elements positioned along the Z axis.
• Interactive cards: Combine depth scaling with translation and rotation.
• Layered interfaces: Adjust the relative depth of visual layers.
• Animated objects: Change depth scaling factors during transitions and keyframe animations.
• Three-dimensional graphics: Stretch or compress the depth of shapes assembled from transformed elements.
• Transform combinations: Combine Z-axis scaling with translateZ(), rotateY(), and perspective().

For example:

.scene {
  perspective: 700px;
}
.object {
  transform-style: preserve-3d;
  transform: rotateY(25deg) scaleZ(1.5);
}

This combines a three-dimensional rotation with depth scaling.

For ordinary horizontal or vertical resizing, use scale(), scaleX(), or scaleY() instead.

Limitations

The scaleZ() function has several requirements and behaviors to consider.

• The function requires exactly one scaling factor.
• Unitless numbers provide the most established browser-compatible syntax.
• CSS Transforms Level 2 also defines percentage factors, but implementation support may vary.
• Length units such as px and em are invalid.
• A factor of 1 leaves depth coordinates unchanged.
• Values greater than 1 increase Z distances from the transform origin.
• Values between 0 and 1 reduce Z distances.
• Negative values reverse the direction of depth coordinates.
• A factor of zero collapses depth coordinates onto the transform-origin plane.
• A flat element at Z = 0 may show no visible change when only scaleZ() is applied.
• Perspective makes depth differences visible but does not create depth by itself.
• The transform-origin property controls the reference point for scaling.
• Three-dimensional child elements may require transform-style: preserve-3d.
• Transform order affects the final result when multiple functions are combined.
• Scaling does not change the element's original layout dimensions.

For example, this is valid:

transform: scaleZ(2);

The following is also valid:

transform: scaleZ(-1);

The following is invalid because no scaling factor is provided:

transform: scaleZ();

The following is invalid because the function accepts only one argument:

transform: scaleZ(1.5, 2);

To scale all three axes independently, use scale3d().

The following is invalid because it uses a length value:

transform: scaleZ(50px);

Separate transform declarations do not accumulate:

.box {
  transform: scaleZ(2);
  transform: translateZ(50px);
}

The second declaration replaces the first.

To apply both transformations, combine them:

.box {
  transform: scaleZ(2) translateZ(50px);
}

Finally, a large positive depth displacement can cause extreme perspective enlargement or clipping when an element approaches or passes the perspective plane.

Use moderate values and test the result at different viewport sizes.

Browser Support

The CSS scaleZ() function has Baseline Widely available browser support. It has been supported across major browsers since July 2015, including Chrome, Edge, Firefox, and Safari.

The function is widely supported in modern desktop and mobile browsers. Support for percentage scaling factors may vary in older implementations.

For current compatibility information, visit Can I Use? for CSS 3D transforms.

Specifications

The scaleZ() function is defined in the CSS Transforms Module Level 2 specification.

The specification defines the function's syntax, Z-axis scaling behavior, and three-dimensional transformation matrix.

Related functions include scale3d(), scaleX(), scaleY(), translateZ(), and perspective().