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:

css scalex function

For example:

HTML with CSS Code
<!DOCTYPE html>
      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);}
   <h2>Without scaleX()</h2>
   <div class="a"></div>

   <div class="b"></div>

   <div class="c"></div>

   <div class="d"></div>

   <div class="e"></div>

   <div class="f"></div>

Without scaleX()






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 »

Liked this post? Share it!