CSS scale3d() Function

Definition and Usage

CSS's scale3d() The function defines the 3D scaling of the element.

scale3d() The function defines the scaling values of the element in the x, y, and z directions.

scale3d() Function in transform Used in the attribute.

Example

Example 1

Using scale3d() Zoom Multiple <div> Elements:

#myDiv1 {
  transform: scale3d(0.8, 0.8, 0.8);
}
#myDiv2 {
  transform: scale3d(-0.5, -0.5, -0.5);
}
#myDiv3 {
  transform: scale3d(1.1, 1.2, 1);
}

Try It Yourself

Example 2

Using scale3d() Zoom Image:

#img1 {
  transform: scale3d(0.8, 0.8, 0.8);
}
#img2 {
  transform: scale3d(-0.5, -0.5, -0.5);
}
#img3 {
  transform: scale3d(1.1, 1.1, 1);
}

Try It Yourself

CSS Syntax

scale3d(sx, sy, sz)

Technical Details

Browser Support

The numbers in the table indicate the browser version that first fully supports this function.

Related Pages

Tutorial:CSS 3D Transformation

Reference:CSS transform Attribute

Reference:CSS scale attribute

Reference:CSS scale() Function

Reference:CSS scaleX() Function

Reference:CSS scaleY() Function