CSS transform: scale3d()

The CSS scale3d() function is used to define the transform property to scale (resize/contract or resize) an element on x, y, and z axes at once, in this way:

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 60px; background: peru; margin: auto;}
      .b{transform: perspective(400px) scale3d(1, 1, 1) rotateX(45deg);}
      .c{transform: perspective(400px) scale3d(1, 1, 4) rotateX(45deg);}
      .d{transform: perspective(400px) scale3d(1, 1, 8) rotateX(45deg);}
      .e{transform: perspective(400px) scale3d(2, 1, 8) rotateX(45deg);}
      .f{transform: perspective(400px) scale3d(1, 3, 5) rotateX(45deg);}
      .g{transform: perspective(400px) scale3d(0.5, 1, 5) rotateX(45deg);}
      .h{transform: perspective(400px) scale3d(1, 0.5, 5) rotateX(45deg);}
   </style>
</head>
<body>
   
   <h2>Without scale3d()</h2>
   <div class="a"></div>

   <h2>scale3d(1, 1, 1)</h2>
   <div class="b"></div>

   <h2>scale3d(1, 1, 4)</h2>
   <div class="c"></div>

   <h2>scale3d(1, 1, 8)</h2>
   <div class="d"></div>

   <h2>scale3d(2, 1, 8)</h2>
   <div class="e"></div>

   <h2>scale3d(1, 3, 5)</h2>
   <div class="f"></div>

   <h2>scale3d(0.5, 1, 5)</h2>
   <div class="g"></div>

   <h2>scale3d(1, 0.5, 5)</h2>
   <div class="h"></div>
   
</body>
</html>

Output

Without scale3d()

scale3d(1, 1, 1)

scale3d(1, 1, 4)

scale3d(1, 1, 8)

scale3d(2, 1, 8)

scale3d(1, 3, 5)

scale3d(0.5, 1, 5)

scale3d(1, 0.5, 5)

In above example, I've used the perspective() and rotateX(), so that the change in effect, can easily be spotted, because we can not see the element's transformation on z-axis on plane surface.

Note - The rotateX() function rotates an element along x-axis.

Note - The perspective() function places the view front or back from z=0 plane.

CSS scale3d() Syntax

The syntax of scale3d() function in CSS, is:

transform: scale3d(x, y, z);

The value of x, y, and z axis may be a positive, zero, or a negative numbers. The general form of scale3d() can also be written as:

transform: scale3d(scaleX(), scaleY(), scaleZ());

CSS Online Test

« Previous Tutorial Next Tutorial »