The scale3d() CSS function allows you to scale an element in three-dimensional space along the X, Y, and Z axes simultaneously. It is part of the broader family of CSS transformation functions, which are applied using the transform property. Unlike scale() or scaleX() and scaleY(), which affect one or two dimensions, scale3d() gives precise control over all three axes, making it especially useful in 3D layouts or when combined with other 3D transform functions like rotate3d().

Each parameter of scale3d() represents a scaling factor: the first for the X-axis (width), the second for the Y-axis (height), and the third for the Z-axis (depth). A value of 1 means no scaling, values greater than 1 enlarge the element along that axis, and values between 0 and 1 shrink it. Negative values are valid but can flip the element along the corresponding axis.

For example, applying scale3d(1.5, 1.2, 0.8) would increase the element’s width by 50%, its height by 20%, and slightly compress its depth. When using scale3d(), combining it with perspective settings or other 3D transforms can create realistic depth effects, especially for interactive components or animated interfaces.

Example usage:

.box {
  transform: scale3d(1.2, 1.2, 1);
  transition: transform 0.3s ease;
}

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

In this example, the element with the class box grows uniformly in width and height, and slightly along the Z-axis when hovered, creating a subtle 3D effect. Combining scale3d() with translate3d() or rotate3d() can enhance the 3D transformation experience further.