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.
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.
The following is the support table for three-dimensional CSS transformations:
CSS3 3D Transforms Support
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.
Current Status: W3C Working Draft
Supported from the following versions:
Mobile / Tablet
* denotes prefix required.
Stats from caniuse.com