CSS scaleX()

ArieGonzAguer's avatar
ArieGonzAguer's avatar
ArieGonzAguer
Published Aug 29, 2025

In CSS, The scaleX() function in CSS is used to apply a scaling transformation to an element along the X-axis. This means that the element will be stretched or compressed horizontally.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn CSS

    In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
    • Beginner Friendly.
      6 hours

Syntax

transform: scaleX(s);

Parameters:

  • s: A number that specifies the scaling factor. A value of 1 means no scaling, values greater than 1 enlarge the element, values between 0 and 1 reduce its size, and negative values flip the element horizontally.

Example

In this example, the element with the class bigCat will be scaled to twice its original width:

The CSS code is:

.regularSizeCat {
  transform: scaleX(1);
}


.bigCat {
  transform: scaleX(2);
}

The HTML code is:

<html>
  <head> </head>
  <body style="background-color: #020617;">
    <p>Regular Cat</p>


    <img class="regularSizeCat" src="cat.jpg" alt="Regular Size Cat" />


    <p>Scaled-X Cat</p>


    <img class="bigCat" src="cat.jpg" alt="Big Cat" />
  </body>
</html>

Regular cat and horizontally stretched cat using CSS scaleX()

All contributors

Learn CSS on Codecademy

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn CSS

    In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
    • Beginner Friendly.
      6 hours