CSS - scaleX()

Quiz

The scaleX() function in CSS used to apply a scaling transformation to an element along the horizontal (X-axis) dimension. The result is a <transform-function> datatype.

The function modifies the abscissa (horizontal, X-coordinate) of element point by a constant factor. When the scale factor is 1, the function gets identity transform. scaleX(-1) specifies an axial symmetry, where the vertical axis passes through the transform origin.

Possible Values

The function scaleX() accepts a single parameter.

s: A number, representing the scaling factor to be applied on the abscissa (horizontal, x-coordinate) of each point of the element.

Syntax

transform: scaleX(s);

CSS scaleX() - Positive and Negative Values

Following is an example of scaleX() function with positive and negative values as parameter:

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-image: url(images/logo.png);
      margin-bottom: 1em;
   }

   section {
      outline: 2px solid blue;
      width: 150px;
      height: max-content;
   }

   .scale-x-positive {
      background-image: url(images/logo.png);
      transform: scaleX(0.8);
   }

   .scale-x-negative {
      background-image: url(images/logo.png);
      transform: scaleX(-0.4);
   }

   .scale-x-one {
      background-image: url(images/logo.png);
      transform: scaleX(1);
   }

   .scale-x-int {
      background-image: url(images/logo.png);
      transform: scaleX(1.5);
   }
</style>
</head>
<body>
   <section>
      <p>No function</p>
      <div></div>
   </section>
   <section>
      <p>scaleX(-0.4)</p>
      <div class="scale-x-negative"></div>
   </section>
   <section>
      <p>scaleX(0.8)</p>
      <div class="scale-x-positive"></div>
   </section>
   <section>
      <p>scaleX(1)</p>
      <div class="scale-x-one"></div>
   </section>
   <section>
      <p>scaleX(1.5)</p>
      <div class="scale-x-int"></div>
   </section>
</body>
</html>

Print Page