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.