CSS scale3d() Function

The CSS scale3d() function is used to scale elements in a three-dimensional space.

The scale3d() function scales an element based on the numbers that you provide as an argument. It specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters.

The scale3d() function is a three-dimensional primative, with the following derived functions: scalex(), scaleY(), scaleZ(), and scale().

Here's an example of scaling an element using scale3d():

<style>
  .scaled {
    transform-origin: top left;
    transform: scale3d(3, 3, 1);
  }
</style>

<img src="/pix/samples/9s.jpg" alt="Sample image">
<img class="scaled" src="/pix/samples/9s.jpg" alt="Sample image">

Removing `transform-origin`

In the previous example, I use transform-origin to adjust the origin of the transformation. Specifically, I use transform-origin: top left; so that the images don't overlap as a result of the scaling operation.

The default origin for the rotation is 50% 50% (i.e. the center). Therefore, if we remove this property, the image will transform based on this value.

So here's an example of what the scale operation might look like when using the default transform-origin value.

<style>
  .scaled {
    transform: scale3d(3, 3, 1);
  }
</style>

<img src="/pix/samples/9s.jpg" alt="Sample image">
<img class="scaled" src="/pix/samples/9s.jpg" alt="Sample image">

Official Syntax

The official syntax of the scale3d() function is as follows:

Possible Values

The scale3d() function accepts number parameters that define the scaling vector for the scale operation.

A number is either an integer, or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits and optionally an exponent composed of e or E and an integer.

CSS Specifications

The scale3d() function is defined in CSS Transforms Module Level 2 (W3C Editor's Draft)

Browser Support