scaleX() CSS Function

☕

Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

scaleX()

CSS FunctionThis function is supported by all modern browsers.

Updated 31st December 2025

Description

The scaleX() CSS function is used to scale an element horizontally along the X-axis. It is part of the broader transform family of functions, allowing developers to modify the size and orientation of elements without affecting their position in the document flow. When applied, scaleX() multiplies the element's width by a specified factor, where a value of 1 keeps the width unchanged, values greater than 1 expand it, and values between 0 and 1 shrink it. Negative values can also be used to flip the element horizontally.

This function works seamlessly with other transform functions like scaleY() or rotate(), enabling complex transformations. It does not alter the element’s width property directly, meaning the layout space it occupies remains the same unless combined with properties like transform-origin to control the pivot point of scaling.

A practical example would be animating a button on hover to give a subtle stretching effect:

button {
  transition: transform 0.3s ease;
}

button:hover {
  transform: scaleX(1.2);
}

In this example, the button grows 20% wider when hovered over, enhancing interactivity without affecting surrounding elements. This function is often used in combination with scaleY() for uniform scaling or with translate() functions to achieve dynamic visual effects.

Syntax

scaleX() = transform: scaleX(<number>);

Values

<number>The value is a positive or negative number.
- a value greater than 1 (for example: 1.5) increases the scale;
- a value less than 1 (for example: 0.8) reduces the scale;
- a negative value (for example: -1) mirrors the element horizontally;
- a value of 1 leaves the element size unchanged and does not give a visible effect.

Example

HTML

<div class="container">

  <div class="box original">Original Box</div>

  <div class="box scaled">Scaled Box (2x)</div>

</div>

CSS

/* Basic styling for visibility */

.container {

  display: flex;

  flex-direction: column;

  gap: 20px;

  padding: 20px;

}



.box {

  width: 150px;

  height: 80px;

  background-color: #3498db;

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: sans-serif;

  border-radius: 8px;

}



/* The scaleX function applied here */

.scaled {

  background-color: #e74c3c; /* Red color to distinguish */

  transform: scaleX(2);    /* Stretches the box to 200% width */

  transform-origin: left;   /* Optional: keeps the left side anchored */

}

Result

Open in editor

Browser Support

The following information will show you the current browser support for the CSS scaleX() function. Hover over a browser icon to see the version that first introduced support for this CSS function.

This function is supported by all modern browsers.