CSS transform: scaleX()

The CSS scaleX() function is used to define the transform property, to scale (stretch/contract or resize) an element on x-axis, in this way:

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 60px; height: 60px; background: peru; margin: auto;}
      div.b{transform: scaleX(0.2);}
      div.c{transform: scaleX(0.6);}
      div.d{transform: scaleX(1);}
      div.e{transform: scaleX(1.2);}
      div.f{transform: scaleX(2.8);}
   </style>
</head>
<body>
   
   <h2>Without scaleX()</h2>
   <div class="a"></div>

   <h2>scaleX(0.2)</h2>
   <div class="b"></div>

   <h2>scaleX(0.6)</h2>
   <div class="c"></div>

   <h2>scaleX(1)</h2>
   <div class="d"></div>

   <h2>scaleX(1.2)</h2>
   <div class="e"></div>

   <h2>scaleX(2.8)</h2>
   <div class="f"></div>
   
</body>
</html>

Output

Without scaleX()

scaleX(0.2)

scaleX(0.6)

scaleX(1)

scaleX(1.2)

scaleX(2.8)

The size of DIV increases/decreases on x-axis based on the value given to scaleX() function. The scaleX(1) is used for the original one.

Note - The element gets scaled without interrupting any other element on the web.

CSS scaleX() Syntax

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

transform: scaleX(val);

The value of val may be a positive, zero, or a negative number.

CSS Online Test

« Previous Tutorial Next Tutorial »