CSS Reference Function

scale3d()

The scale3d() function is a 3D transform function that is used to scale an element in three-dimensional space.

It is the three-dimensional equivalent of the scale() function. It takes three unitless <number>s as a value, sx, sy, and sz, where sx will scale the element in the direction of the x-asix, sy will scale it in the direction of the y-axis, and sz will scale it in the direction of the z-axis.

If the value provided is greater than one, the element is scaled up and it will look bigger in the corresponding direction. If the value is equal to one, the element stays unchanged (in the corresponding direction). If the value is between zero and one exclusively, the element is scaled down. If the value is zero, the element disappears. Negative values are allowed, but they don’t scale the element. In fact, negative sx and sy values cause the transformed element to be flipped in either direction! See the scale() section in the transform entry for examples.

Examples:

transform: scale3d(1, 1, 1); /* element is unchanged */
transform: scale3d(2, 2, 2); /* element looks twice as its original size */
transform: scale3d(1, 2, 0); 
transform: scale3d(2, 1, 3);
transform: scale3d(-1, -1, -1);
                

The official syntax looks as follows:

transform: scale3d(<number>, <number>, <number>);
                

For a better understanding of the transform functions, please refer to the transform entry.

Browser Support

The following is the support table for three-dimensional CSS transformations:

CSS3 3D Transforms

Method of transforming an element in the third dimension using the `transform` property. Includes support for the `perspective` property to set the perspective in z-space and the `backface-visibility` property to toggle display of the reverse side of a 3D-transformed element.

W3C Working Draft

Supported from the following versions:

Desktop

  • 12*
  • 10*
  • 10
  • 15*
  • 4*

Mobile / Tablet

  • 3.2*
  • 3*
  • 37
  • 57
  • 52

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 9:37 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.