Skip to content
Latest: The updated version of the Creating NPM Package (React JavaScript) book is out

CSS scale3d() Function – How to Resize Elements in 3D

scale3d() transforms an element by resizing (scaling) it three-dimensionally from a fixed point along the x-, y-, and z-axis.

Illustration of the 3D Cartesian coordinate
system

A three-dimensional Cartesian coordinate system showing the X-, Y-, and Z-axis

Syntax of the CSS scale3d() Function

scale3d() accepts three arguments. Here is the syntax:

element {
transform: scale3d(x, y, z);
}

The x, y, and z arguments are numbers specifying the x-, y-, and z-coordinates. The coordinates are the axis along which browsers will scale the element.

Examples of the CSS scale3d() Function

Below are some examples of how the CSS scale3d() function works.

How to use scale3d() with CSS perspective() and rotateX() functions

img {
transform: perspective(370px) scale3d(1, 1, 5) rotateX(17deg);
width: 80%;
}

Try Editing It

Here’s what we did in the snippet above:

  1. We used the perspective() function to define a 370px distance between the user and the z=0 plane.
  2. The scale3d() function specifies a scale factor of 1, 1, and 5 for the image along the x-, y-, and z-axis.
  3. We used the rotateX() function to rotate the image seventeen-degree (17⁰) around the x-axis.

How to scale elements three-dimensionally

img {
width: 40%;
}
.second-image {
transform: scale3d(5, 3, 0.05);
transform-origin: top left;
}

Try Editing It

We used the scale3d() function to specify a scale factor of 5, 3, and 0.05 for the image along the x-, y-, and z-axis.