CSS scaleX() Function

CSS scaleX() Function

The CSS scaleX() function increases, decreases, or reflects the visual width of an element along the horizontal X axis.

It is used with the transform property and accepts a single scaling factor. The function changes an element's horizontal appearance without changing its original layout width, making it useful for stretching, compressing, mirroring, and animating elements.

Syntax

transform: scaleX(sx);

The scaleX() function accepts one scaling factor that controls the element's horizontal size.

For example:

transform: scaleX(1);
transform: scaleX(1.5);
transform: scaleX(0.75);
transform: scaleX(0.5);
transform: scaleX(-1);

A factor of 1 preserves the original width. Values greater than 1 enlarge the element horizontally, while values between 0 and 1 reduce its visible width.

Negative values reverse the horizontal direction and can create a mirrored appearance.

For example:

transform: scaleX(1.5);

This increases the element's rendered width to 150% of its original width.

The function returns a CSS <transform-function> value and must be used within a property that accepts transform functions, such as transform.

Parameters

The scaleX() function accepts one required parameter.

The scaling factor multiplies the element's horizontal coordinates relative to its transform origin.

For example:

.box {
  transform: scaleX(2);
}

This doubles the element's visible width without changing its height.

Unlike length-based properties, scaleX() does not accept units such as px, em, or rem.

For broad browser compatibility, use unitless numbers rather than percentages with this function.

How It Works

The scaleX() function multiplies the horizontal coordinates of an element by the specified factor.

For example, consider an element with a width of 100px and a height of 80px:

.box {
  width: 100px;
  height: 80px;
  transform: scaleX(1.5);
}

The element appears 150px wide while remaining 80px high.

The original CSS width remains 100px because the transformation changes the rendered appearance rather than the element's layout dimensions.

Reducing the factor produces a narrower appearance:

.box {
  width: 100px;
  height: 80px;
  transform: scaleX(0.5);
}

The element now appears 50px wide while its height remains unchanged.

By default, horizontal scaling occurs around the center of the element. The transform-origin property can change this reference point.

Scaling affects the entire rendered element, including its text, borders, backgrounds, images, and other contents.

Because only the X axis is scaled, the element's proportions are generally not preserved.

Scaling Factors

The scaling factor determines how much the element's visible width changes.

For example:

.narrow {
  transform: scaleX(0.5);
}
.normal {
  transform: scaleX(1);
}
.wide {
  transform: scaleX(1.5);
}

The first element appears half as wide, the second retains its original width, and the third appears 50% wider.

Scaling factors are not limited to the range from zero to two. Larger values are valid, although they can cause elements to extend beyond their containers or overlap neighboring content.

Enlarging and Reducing Width

Positive scaling factors allow elements to be widened or narrowed without changing their CSS width.

Enlarging an Element

A factor greater than 1 increases the element's visible width.

.banner {
  transform: scaleX(1.25);
}

This makes the banner appear 25% wider while preserving its height.

Reducing an Element

A factor between 0 and 1 reduces the visible width.

.banner {
  transform: scaleX(0.75);
}

This makes the banner appear 25% narrower.

Collapsing an Element

A factor of zero collapses the horizontal coordinates toward the transform origin.

.banner {
  transform: scaleX(0);
}

The element becomes visually collapsed along the X axis, but it remains part of the document layout.

Because the transformation affects the element's contents, text and images are also stretched or compressed horizontally.

When maintaining natural proportions is important, use scale() with equal scaling factors instead.

Negative Scaling Values

Negative scaling factors reverse the horizontal direction of the element.

For example:

.mirrored {
  transform: scaleX(-1);
}

This creates a horizontal mirror image, reflecting the element across a vertical axis through its transform origin.

Negative values can also change the element's width:

.mirrored-small {
  transform: scaleX(-0.5);
}
.mirrored-large {
  transform: scaleX(-1.5);
}

The first declaration reflects the element and reduces its visible width to 50%. The second reflects it and increases its visible width to 150%.

Horizontal reflection is useful for directional arrows, icons, and decorative graphics.

Be careful when reflecting elements containing text because the text will also appear reversed.

Transform Origin

The transform-origin property determines the point from which horizontal scaling occurs.

By default, the transform origin is the center of the element:

.box {
  transform-origin: center center;
  transform: scaleX(1.5);
}

The element expands equally toward the left and right.

Scaling From the Left

To keep the left edge anchored, set the origin to the left:

.box {
  transform-origin: left center;
  transform: scaleX(1.5);
}

The element expands toward the right while its left edge remains in place.

Scaling From the Right

To keep the right edge anchored, use:

.box {
  transform-origin: right center;
  transform: scaleX(1.5);
}

The element expands toward the left.

Custom Transform Origin

Percentages and lengths can specify a custom reference point:

transform-origin: 25% 50%;
transform-origin: 20px center;

The first value controls the horizontal reference position, while the second controls the vertical reference position.

For scaleX() alone, the horizontal origin is the primary factor controlling where the element expands or contracts.

Changing the transform origin is useful for progress indicators, expanding panels, animated underlines, and other effects that need a fixed edge.

Scaling vs. Width

The scaleX() function changes an element's rendered width, while the width property changes its layout width.

For example:

.box {
  width: 100px;
  transform: scaleX(2);
}

The box appears 200px wide but retains its original 100px layout width.

By comparison:

.box {
  width: 200px;
}

This changes the actual width used during layout and may affect the position of surrounding elements.

Use scaleX() when the goal is a visual transformation. Use width when the actual layout width needs to change.

Although scaling does not cause normal document reflow, it can affect the element's visual bounding box and overflow behavior.

Combining Transforms

The scaleX() function can be combined with other transform functions in a single transform declaration.

Scaling and Rotation

The following example widens and rotates an element:

.box {
  transform: scaleX(1.5) rotate(15deg);
}

The element is rotated and scaled horizontally.

Scaling and Translation

The following example moves an element horizontally and scales its width:

.box {
  transform: translateX(40px) scaleX(1.5);
}

The element moves 40px to the right and appears 50% wider.

Scaling and Vertical Scaling

Horizontal and vertical scaling can be combined:

.box {
  transform: scaleX(1.5) scaleY(0.75);
}

This makes the element 50% wider and 25% shorter.

Transform Order

The order of transform functions can affect the final result.

.first {
  transform: translateX(50px) scaleX(2);
}
.second {
  transform: scaleX(2) translateX(50px);
}

In the first declaration, the translation produces a 50px movement. In the second, the scaling also affects the translation, producing a 100px horizontal movement.

Transform functions are composed in the order written, with the rightmost function acting first on the element's coordinates.

When combining transforms, use a consistent order and test the final appearance.

Related Scaling Functions

CSS provides several functions for scaling elements along different axes.

The following declarations produce equivalent horizontal scaling:

transform: scaleX(1.5);
transform: scale(1.5, 1);
transform: scale3d(1.5, 1, 1);

All three declarations increase the visible width to 150% while leaving the Y and Z scaling factors unchanged.

CSS also provides an individual scale property:

.box {
  scale: 1.5 1;
}

This applies horizontal scaling independently of the transform property.

Use scaleX() when only the horizontal dimension needs to change and the transformation is being specified through transform.

Example

The following example compares normal width, reduced width, and enlarged width using the scaleX() function.

HTML:

<div class="scalex-demo">
  <div class="scalex-item">
    <div class="scalex-box normal">Normal</div>
  </div>
  <div class="scalex-item">
    <div class="scalex-box reduced">50%</div>
  </div>
  <div class="scalex-item">
    <div class="scalex-box enlarged">150%</div>
  </div>
</div>

CSS:

.scalex-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  padding: 30px 15px;
}
.scalex-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  background-color: #f1f1f1;
}
.scalex-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  color: #fff;
  background-color: #3498db;
}
.normal {
  transform: scaleX(1);
}
.reduced {
  transform: scaleX(0.5);
}
.enlarged {
  transform: scaleX(1.5);
}

The first box retains its original width. The second appears half as wide, while the third appears 50% wider.

All three boxes retain the same height and original layout dimensions.

The grey backgrounds help show that the transformation changes the rendered width without changing the space reserved for each item.

Reflection Example

The following example demonstrates how a negative scaling factor creates a horizontal reflection.

HTML:

<div class="reflection-demo">
  <div class="reflection-item">
    <div class="reflection-arrow normal-arrow">&rarr;</div>
    <p>Original</p>
  </div>
  <div class="reflection-item">
    <div class="reflection-arrow flipped-arrow">&rarr;</div>
    <p>Reflected</p>
  </div>
</div>

CSS:

.reflection-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 20px 15px;
}
.reflection-item {
  width: 130px;
  text-align: center;
}
.reflection-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 90px;
  color: #fff;
  background-color: #3498db;
  font-size: 48px;
}
.normal-arrow {
  transform: scaleX(1);
}
.flipped-arrow {
  transform: scaleX(-1);
}

The first arrow points right. The second is reflected horizontally and points left.

Both arrows use the same HTML character. Only the scaling factor changes their rendered orientation.

The labels remain readable because they are placed outside the transformed arrow elements.

Transform Origin Example

The following example demonstrates how changing the transform origin affects the direction of horizontal scaling.

HTML:

<div class="origin-demo">
  <div class="origin-item">
    <div class="origin-box origin-center">Center</div>
  </div>
  <div class="origin-item">
    <div class="origin-box origin-left">Left</div>
  </div>
</div>

CSS:

.origin-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 30px 15px;
}
.origin-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 110px;
  background-color: #f1f1f1;
}
.origin-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 60px;
  color: #fff;
  background-color: #3498db;
  transform: scaleX(1.5);
}
.origin-center {
  transform-origin: center center;
}
.origin-left {
  transform-origin: left center;
}

The first box expands equally toward the left and right because its transform origin is centered.

The second box expands toward the right because its left edge is used as the transform origin.

Both boxes use the same scaling factor, but their final positions differ because of the origin settings.

Transitions and Animations

The scaleX() function can be animated using CSS transitions and keyframe animations.

Horizontal Expansion

The following example expands a decorative line when its parent element is hovered or receives keyboard focus.

.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background-color: #3498db;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}
.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
}

The line begins horizontally collapsed and expands to its full width over 0.3 seconds.

Horizontal Reflection Transition

A scaling transition can also reverse the horizontal direction of an element.

.arrow {
  transition: transform 0.4s ease;
}
.arrow:hover {
  transform: scaleX(-1);
}

The arrow transitions from its original orientation to a horizontal reflection. During the transition, it briefly collapses to zero width as the scaling factor passes through zero.

Keyframe Animation

The following animation repeatedly expands and contracts an element horizontally:

@keyframes horizontal-pulse {
  0%, 100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(1.25);
  }
}
.animated-box {
  animation: horizontal-pulse 2s ease-in-out infinite;
}

The element grows to 125% of its original width and then returns to normal.

Reduced Motion

Scaling animations can be distracting or uncomfortable for some users. Respect reduced-motion preferences when adding animated effects.

@media (prefers-reduced-motion: reduce) {
  .animated-box {
    animation: none;
  }
  .arrow,
  .nav-link::after {
    transition: none;
  }
}

This removes the continuous animation and disables the transitions for users who request reduced motion.

Common Uses

The scaleX() function is useful for horizontal visual transformations that do not require changes to the document layout.

• Horizontal resizing: Stretch or compress elements along the X axis.
• Mirrored graphics: Reflect arrows, icons, and decorative images.
• Navigation effects: Animate underlines that expand from one edge.
• Progress indicators: Visually expand a bar from left to right.
• Hover effects: Widen elements to provide visual emphasis.
• Animated panels: Create horizontal opening and closing effects.
• Decorative elements: Change the proportions of shapes and backgrounds.
• Transform combinations: Combine horizontal scaling with rotation, translation, or vertical scaling.

For example, a progress indicator can use horizontal scaling:

.progress-track {
  height: 8px;
  background-color: #ddd;
}
.progress-fill {
  width: 100%;
  height: 100%;
  background-color: #3498db;
  transform: scaleX(0.65);
  transform-origin: left center;
}

The filled bar appears to occupy 65% of the track's width while remaining anchored to the left edge.

For accessible progress indicators, also provide a meaningful text value or appropriate progress semantics. A visual scaling effect alone does not communicate progress to every user.

Limitations

The scaleX() function has several requirements and behaviors to consider.

• The function requires exactly one scaling factor.
• The established syntax uses a unitless number.
• A factor of 1 preserves the original horizontal size.
• Values greater than 1 enlarge the element horizontally.
• Values between 0 and 1 reduce the visible width.
• Negative values reflect the element horizontally.
• A factor of zero visually collapses the horizontal dimension.
• The element's height remains unchanged by scaleX() alone.
• Scaling does not change the element's original layout dimensions.
• Scaled elements may overlap nearby content or extend beyond their containers.
• Text, images, borders, and other contents are also scaled horizontally.
• The transform-origin property controls the scaling reference point.
• Multiple transform functions must be combined within the same transform declaration.

For example, this is valid:

transform: scaleX(1.5);

The following is also valid:

transform: scaleX(-1);

The following is invalid because no scaling factor is provided:

transform: scaleX();

The following is invalid because the function accepts only one argument:

transform: scaleX(1.5, 0.75);

To scale both axes independently, use scale().

The following is invalid because the scaling factor uses a length unit:

transform: scaleX(150px);

Separate transform declarations do not accumulate:

.box {
  transform: scaleX(1.5);
  transform: rotate(20deg);
}

The second declaration replaces the first.

To combine both transformations, write:

.box {
  transform: scaleX(1.5) rotate(20deg);
}

Finally, scaling an element to zero does not remove it from the document or automatically make it inaccessible. Use appropriate visibility and interaction controls when an element should be hidden or disabled.

Browser Support

The CSS scaleX() function has Baseline Widely available browser support. It has been supported across major browsers since July 2015, including Chrome, Edge, Firefox, and Safari.

The function is widely supported in modern desktop and mobile browsers. Older browser versions may require compatibility testing.

For current compatibility information, visit Can I Use? for CSS 2D transforms.

Specifications

The scaleX() function is defined in the CSS Transforms Module Level 1 specification.

The specification defines the function's syntax, horizontal scaling behavior, and transformation matrix.

Related functions include scale(), scale3d(), scaleY(), and scaleZ().