CSS transform: scale()

The CSS scale() function is used to define the transform property, to scale (stretch/contract or resize) an element on both x and y-axis at once. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 60px; height: 60px; background: peru; margin: auto;}
      .b{transform: scale(1, 1);}
      .c{transform: scale(2, 1);}
      .d{transform: scale(1, 2);}
      .e{transform: scale(4, 2);}
   </style>
</head>
<body>
   
   <h2>Without scale()</h2>
   <div class="a"></div>

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

   <h2>scale(2, 1)</h2>
   <div class="c"></div>

   <h2>scale(1, 2)</h2>
   <div class="d"></div>

   <h2>scale(4, 2)</h2>
   <div class="e"></div>
   
</body>
</html>

Output

Without scale()

scale(1, 1)

scale(2, 1)

scale(1, 2)

scale(4, 2)

CSS scale() Syntax

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

transform: scale(x, y);

The x parameter refers to scaleX(), whereas the y parameter refers to scaleY(). Therefore the general form of scale() function can also be written as:

transform: scale(scaleX(), scaleY());

Note - Giving only one value to scale() like scale(1.2), will get applied to both scaleX() and scaleY(). For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 60px; height: 60px; background: peru; margin: auto;}
      .a{transform: scale(1);}
      .b{transform: scale(1.4);}
      .c{transform: scale(2);}
   </style>
</head>
<body>

   <h2>scale(1)</h2>
   <div class="a"></div>

   <h2>scale(1.4)</h2>
   <div class="b"></div>

   <h2>scale(2)</h2>
   <div class="c"></div>
   
</body>
</html>

Output

scale(1)

scale(1.4)

scale(2)

CSS Online Test

« Previous Tutorial Next Tutorial »