CSS scale3d() Function

CSS scale3d() Function

The CSS scale3d() function scales an element along the X, Y, and Z axes in three-dimensional space.

It is used with the transform property and accepts three scaling factors. These values control horizontal, vertical, and depth scaling independently, making the function useful for three-dimensional interfaces, animated objects, and perspective-based effects.

Syntax

transform: scale3d(sx, sy, sz);

The scale3d() function requires three comma-separated scaling factors, one for each axis.

For example:

transform: scale3d(1, 1, 1);
transform: scale3d(1.5, 1.5, 1);
transform: scale3d(2, 0.5, 1);
transform: scale3d(1, 1, 2);
transform: scale3d(-1, 1, 1);

The first declaration leaves all three axes unchanged. The second enlarges the element horizontally and vertically, while the third applies different scaling factors to those axes.

The fourth changes the Z-axis scale, and the fifth reflects the element horizontally.

Unlike scale(), which accepts one or two arguments, scale3d() requires all three.

The function returns a CSS <transform-function> value.

Parameters

The scale3d() function accepts three required parameters.

Each factor is commonly written as a unitless number. The current CSS Transforms Level 2 syntax also defines percentage factors, although support for newer syntax should be checked before relying on it.

A factor of 1 leaves an axis unchanged. Values greater than 1 enlarge that axis, values between 0 and 1 reduce it, and negative values reverse its direction.

For example:

.box {
  transform: scale3d(1.5, 0.75, 2);
}

This applies 150% horizontal scaling, 75% vertical scaling, and a Z-axis multiplier of 2.

Scaling factors are not lengths. Values such as 20px or 2em are invalid arguments.

How It Works

The scale3d() function multiplies coordinates along three perpendicular axes.

The X axis runs horizontally, the Y axis runs vertically, and the Z axis extends toward and away from the viewer.

For example:

.box {
  width: 100px;
  height: 80px;
  transform: scale3d(1.5, 2, 1);
}

The box appears 150px wide and 160px high. Because the Z-axis factor is 1, its depth coordinates are unchanged.

Changing the third factor produces a different kind of transformation:

.box {
  transform: scale3d(1, 1, 2);
}

This doubles the element's Z coordinates relative to its transform origin. However, a flat element positioned entirely at Z = 0 may look unchanged.

To make Z-axis scaling visible, it can be combined with a depth translation, rotation, or three-dimensional child elements.

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

Scaling Factors

Scaling factors determine how coordinates change along each axis.

The visible result depends on the element's original geometry and any other transformations applied to it.

For example, increasing the Z-axis factor does not automatically make a flat element appear wider or taller. It changes depth coordinates, which may affect the final rendering when perspective or other three-dimensional transformations are involved.

The Three Axes

Understanding the three coordinate axes helps explain how scale3d() works.

X Axis - Horizontal Scaling

The first parameter controls horizontal scaling.

.box {
  transform: scale3d(1.5, 1, 1);
}

This makes the element 50% wider while leaving the other axes unchanged.

Y Axis - Vertical Scaling

The second parameter controls vertical scaling.

.box {
  transform: scale3d(1, 0.5, 1);
}

This reduces the element's visible height to 50%.

Z Axis - Depth Scaling

The third parameter scales coordinates along the Z axis.

.box {
  transform: scale3d(1, 1, 1.5);
}

This multiplies Z coordinates by 1.5. The effect is most apparent when the element or its contents have depth relative to the transform origin.

Unlike the X and Y axes, the Z axis does not represent the ordinary CSS width or height of a flat element.

Uniform and Non-Uniform Scaling

Uniform scaling uses the same factor for all three axes, while non-uniform scaling uses different factors.

Uniform Scaling

For example:

.box {
  transform: scale3d(1.5, 1.5, 1.5);
}

All three coordinate axes are scaled by the same factor. This preserves the proportions of three-dimensional geometry.

For a flat element without depth, the visible result may resemble:

.box {
  transform: scale(1.5);
}

Non-Uniform Scaling

Different factors allow the element to be stretched or compressed independently.

.box {
  transform: scale3d(2, 0.75, 1.5);
}

The X coordinates are doubled, the Y coordinates are reduced to 75%, and the Z coordinates are multiplied by 1.5.

Non-uniform scaling can distort text, images, and other flat content. It can also alter the proportions of three-dimensional objects.

Negative Scaling Values

Negative scaling factors reflect coordinates along the corresponding axis.

For example:

.horizontal-flip {
  transform: scale3d(-1, 1, 1);
}
.vertical-flip {
  transform: scale3d(1, -1, 1);
}
.depth-flip {
  transform: scale3d(1, 1, -1);
}

The first declaration mirrors the element horizontally. The second flips it vertically.

The third reverses its depth coordinates. This is most useful when the element is part of a three-dimensional arrangement.

Negative factors can also change size:

.box {
  transform: scale3d(-1.5, 0.75, 1);
}

This reflects the element horizontally while increasing its horizontal magnitude to 150% and reducing its vertical magnitude to 75%.

Use negative scaling carefully on elements containing text, since reflections can make text difficult to read.

Perspective and Depth

Perspective makes objects at different depths appear at different sizes, helping create the impression of three-dimensional space.

CSS provides the perspective property and the perspective() transform function.

For example:

.scene {
  perspective: 600px;
}
.box {
  transform: rotateY(30deg) scale3d(1.2, 1.2, 1.5);
}

The rotation tilts the element in three-dimensional space. The scaling factors then affect its coordinates, and the perspective changes how the resulting depth is projected onto the screen.

Perspective does not create depth by itself. A flat element with no Z displacement may show no visible difference when only its Z-axis scale changes.

Scaling an Element With Depth

The following declaration combines depth translation with scaling:

.box {
  transform: perspective(600px) scale3d(1, 1, 2) translateZ(80px);
}

The translation introduces a Z displacement, which is then affected by the Z-axis scaling. Perspective makes the resulting position in depth visible.

Transform order matters. Moving scale3d() before or after another transform can change the result.

Preserving Three-Dimensional Children

For elements containing transformed children, transform-style: preserve-3d can preserve their three-dimensional arrangement.

.object {
  transform-style: preserve-3d;
}
.object .face {
  transform: translateZ(40px);
}

Without preserved three-dimensional rendering, nested transformed elements may be flattened into their parent's plane.

Transform Origin

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

By default, the origin is the center of the element, with a Z offset of zero.

.box {
  transform-origin: center center;
  transform: scale3d(1.5, 1.5, 1.5);
}

The element scales relative to its center.

Changing the origin affects how its position and dimensions appear after scaling.

.box {
  transform-origin: top left;
  transform: scale3d(1.5, 1.5, 1);
}

The element grows toward the right and downward while its top-left corner remains anchored.

Three-Dimensional Transform Origin

The transform-origin property can also include a third value that specifies a Z-axis offset.

.box {
  transform-origin: center center 50px;
  transform: scale3d(1, 1, 2);
}

The scaling is performed relative to a point 50px along the Z axis from the element's reference plane.

Changing the Z-axis origin can affect the element's final depth position even when its X and Y scaling factors remain unchanged.

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

Combining Transforms

The scale3d() function can be combined with translation, rotation, and perspective functions in a single transform declaration.

Scaling and Rotation

.box {
  transform: rotateY(30deg) scale3d(1.2, 1.2, 1.5);
}

This combines a rotation around the Y axis with scaling along all three axes.

Scaling and Translation

.box {
  transform: translate3d(20px, 10px, 50px) scale3d(1.2, 1.2, 1.5);
}

This combines three-dimensional movement with scaling.

Scaling and Perspective

.box {
  transform: perspective(600px) rotateY(30deg) scale3d(1.2, 1.2, 1.5);
}

The perspective function creates a depth projection for the combined transformations.

Transform Order

Transform functions are composed in the order written, and the rightmost function acts first on the element's coordinates.

.first {
  transform: translateZ(50px) scale3d(1, 1, 2);
}
.second {
  transform: scale3d(1, 1, 2) translateZ(50px);
}

In the first declaration, the 50px translation is not doubled by the scaling. In the second, the Z-axis scale also affects the translation, producing a 100px depth displacement.

For predictable results, keep the order of transformations deliberate and consistent.

Related Scaling Functions

CSS provides several scaling functions for different axes and dimensions.

For example, these declarations produce equivalent scaling:

transform: scale3d(1.5, 0.75, 1);
transform: scale(1.5, 0.75);

When the Z-axis factor is 1, scale3d() can produce the same geometric scaling as scale().

These declarations also express equivalent scaling:

transform: scale3d(1.5, 0.75, 2);
transform: scaleX(1.5) scaleY(0.75) scaleZ(2);

CSS also provides an individual scale property that accepts three scaling factors:

.box {
  scale: 1.5 0.75 2;
}

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

Example

The following example compares normal size, horizontal and vertical enlargement, and non-uniform scaling using scale3d().

HTML:

<div class="scale3d-demo">
  <div class="scale3d-item">
    <div class="scale3d-box normal">Normal</div>
  </div>
  <div class="scale3d-item">
    <div class="scale3d-box enlarged">150%</div>
  </div>
  <div class="scale3d-item">
    <div class="scale3d-box stretched">X / Y</div>
  </div>
</div>

CSS:

.scale3d-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  padding: 30px 15px;
}
.scale3d-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  background-color: #f1f1f1;
}
.scale3d-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  color: #fff;
  background-color: #3498db;
}
.normal {
  transform: scale3d(1, 1, 1);
}
.enlarged {
  transform: scale3d(1.5, 1.5, 1);
}
.stretched {
  transform: scale3d(1.5, 0.75, 1);
}

The first box remains unchanged. The second is enlarged uniformly in the screen plane, while the third is stretched horizontally and compressed vertically.

The Z-axis factor remains 1 in all three samples, allowing the X and Y scaling effects to be compared directly.

Depth Scaling Example

The following example demonstrates how changing the Z-axis scale affects an element that has been translated in depth.

HTML:

<div class="depth-demo">
  <div class="depth-item">
    <div class="depth-box depth-normal">Z = 1</div>
  </div>
  <div class="depth-item">
    <div class="depth-box depth-scaled">Z = 2</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: 70px;
  height: 70px;
  color: #fff;
  background-color: #3498db;
}
.depth-normal {
  transform: scale3d(1, 1, 1) translateZ(60px);
}
.depth-scaled {
  transform: scale3d(1, 1, 2) translateZ(60px);
}

Both boxes begin with a 60px translation along the Z axis. The second box applies a Z-axis scaling factor of 2, increasing its resulting depth displacement to 120px.

Because perspective is applied, the second box appears larger even though its X and Y scaling factors remain unchanged.

This demonstrates that Z-axis scaling affects depth coordinates rather than directly changing the element's CSS width and height.

Transitions and Animations

The scale3d() function can be animated using CSS transitions and keyframes.

Hover Transition

The following example enlarges an element when the pointer moves over it:

.card {
  transition: transform 0.3s ease;
}
.card:hover,
.card:focus-visible {
  transform: scale3d(1.1, 1.1, 1);
}

The element grows to 110% of its original width and height.

Three-Dimensional Transition

Scaling can be combined with rotation for a more noticeable depth effect.

.scene {
  perspective: 600px;
}
.card {
  transition: transform 0.4s ease;
}
.card:hover {
  transform: rotateY(25deg) scale3d(1.1, 1.1, 1.5);
}

The element rotates around the Y axis and scales along all three axes. The visible effect depends on the geometry and depth of the transformed element.

Keyframe Animation

@keyframes scale3d-pulse {
  0%, 100% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.15, 1.15, 1);
  }
}
.animated-box {
  animation: scale3d-pulse 2s ease-in-out infinite;
}

The element grows and shrinks smoothly while keeping its Z-axis scale unchanged.

Reduced Motion

Scaling and depth animations can cause discomfort for some users. Use prefers-reduced-motion to remove unnecessary movement.

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

This disables the animation and transition when reduced motion is requested.

Common Uses

The scale3d() function is useful when an interface or graphic includes three-dimensional transformations.

• Three-dimensional cards: Combine scaling with rotation and perspective.
• Interactive interfaces: Add visual emphasis to transformed elements.
• Animated objects: Change the proportions of elements positioned in three-dimensional space.
• Depth effects: Adjust Z coordinates of translated or rotated content.
• Image and graphic effects: Combine enlargement with three-dimensional transformations.
• Decorative components: Stretch or compress transformed shapes.
• Transitions: Animate scaling factors for smooth visual changes.
• Complex transform sequences: Combine scaling with rotate3d(), translate3d(), and perspective().

For ordinary two-dimensional enlargement or reduction, scale() is usually simpler.

Use scale3d() when control over the Z-axis scaling factor is needed.

Limitations

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

• The function requires exactly three comma-separated scaling factors.
• Unitless numbers are the most widely established argument form; percentage support should be checked for the target browsers.
• Length units such as px and em are not accepted.
• Negative factors reflect coordinates along the corresponding axis.
• A factor of zero collapses coordinates along that axis.
• Z-axis scaling may have no visible effect on a flat element at Z = 0.
• Perspective can make depth-related changes visible but does not create depth on its own.
• Scaling changes rendered geometry without changing normal document flow.
• Large scaling factors may cause content to overlap or extend beyond its container.
• Non-uniform scaling can distort text, images, and other content.
• The transform-origin property controls the reference point for scaling.
• Transform order affects the final result when multiple functions are combined.

For example, this is valid:

transform: scale3d(1.5, 0.75, 2);

The following is invalid because it provides only two parameters:

transform: scale3d(1.5, 0.75);

The following is invalid because it uses a length value:

transform: scale3d(1, 1, 20px);

The following is invalid because it contains four parameters:

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

Separate transform declarations do not accumulate:

.box {
  transform: scale3d(1.5, 1.5, 1);
  transform: rotateY(30deg);
}

The second declaration replaces the first.

To apply both transformations, combine them:

.box {
  transform: rotateY(30deg) scale3d(1.5, 1.5, 1);
}

Scaling an element to zero does not remove it from the document or automatically make it inaccessible. Use appropriate visibility and interaction controls when an element should be hidden or disabled.

Browser Support

The CSS scale3d() 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 scale3d() function is defined in the CSS Transforms Module Level 2 specification.

The specification defines the function's three-dimensional scaling behavior, accepted arguments, and transformation matrix.

Related functions include scale(), scaleX(), scaleY(), scaleZ(), and translate3d().