CSS scaleY() Function

CSS scaleY() Function

The CSS scaleY() function increases, decreases, or reflects the visual height of an element along the vertical Y axis.

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

Syntax

transform: scaleY(sy);

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

For example:

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

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

Negative values reverse the vertical direction, producing an upside-down reflection.

For example:

transform: scaleY(1.5);

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

The function returns a CSS <transform-function> value and is commonly used within the transform property.

Parameters

The scaleY() function accepts one required parameter.

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

For example:

.box {
  transform: scaleY(2);
}

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

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

The function's standard syntax uses a CSS <number> value rather than a percentage.

How It Works

The scaleY() function multiplies the vertical 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: scaleY(1.5);
}

The element appears 100px wide and 120px high.

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

Reducing the factor produces a shorter appearance:

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

The element now appears 40px high while its width remains unchanged.

By default, vertical 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 Y axis is scaled, the element's proportions are generally not preserved.

Scaling Factors

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

For example:

.short {
  transform: scaleY(0.5);
}
.normal {
  transform: scaleY(1);
}
.tall {
  transform: scaleY(1.5);
}

The first element appears half as tall, the second retains its original height, and the third appears 50% taller.

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 Height

Positive scaling factors allow elements to be stretched or compressed vertically without changing their CSS height.

Enlarging an Element

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

.panel {
  transform: scaleY(1.25);
}

This makes the panel appear 25% taller while preserving its width.

Reducing an Element

A factor between 0 and 1 reduces the visible height.

.panel {
  transform: scaleY(0.75);
}

This makes the panel appear 25% shorter.

Collapsing an Element

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

.panel {
  transform: scaleY(0);
}

The element becomes visually collapsed along the Y 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 vertically.

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

Negative Scaling Values

Negative scaling factors reverse the vertical direction of the element.

For example:

.flipped {
  transform: scaleY(-1);
}

This creates a vertical reflection across a horizontal axis through the element's transform origin.

Negative values can also change the element's height:

.flipped-small {
  transform: scaleY(-0.5);
}
.flipped-large {
  transform: scaleY(-1.5);
}

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

Vertical reflection can be useful for decorative shapes, directional icons, and mirrored graphics.

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

Transform Origin

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

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

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

The element expands equally upward and downward.

Scaling From the Top

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

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

The element expands downward while its top edge remains in place.

Scaling From the Bottom

To keep the bottom edge anchored, use:

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

The element expands upward while its bottom edge remains in place.

Custom Transform Origin

Percentages and lengths can specify a custom reference point:

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

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

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

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

Scaling vs. Height

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

For example:

.box {
  height: 100px;
  transform: scaleY(2);
}

The box appears 200px tall but retains its original 100px layout height.

By comparison:

.box {
  height: 200px;
}

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

Use scaleY() when the goal is a visual transformation. Use height when the actual layout height 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 scaleY() function can be combined with other transform functions in a single transform declaration.

Scaling and Rotation

The following example stretches and rotates an element:

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

The element is rotated and scaled vertically.

Scaling and Translation

The following example moves an element vertically and scales its height:

.box {
  transform: translateY(40px) scaleY(1.5);
}

The element moves 40px downward and appears 50% taller.

Scaling and Horizontal Scaling

Vertical and horizontal scaling can be combined:

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

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

Transform Order

The order of transform functions can affect the final result.

.first {
  transform: translateY(50px) scaleY(2);
}
.second {
  transform: scaleY(2) translateY(50px);
}

In the first declaration, the translation produces a 50px movement. In the second, the scaling also affects the translation, producing a 100px vertical 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 vertical scaling:

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

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

CSS also provides an individual scale property:

.box {
  scale: 1 1.5;
}

This applies vertical scaling independently of the transform property.

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

Example

The following example compares normal height, reduced height, and enlarged height using the scaleY() function.

HTML:

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

CSS:

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

The first box retains its original height. The second appears half as tall, while the third appears 50% taller.

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

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

Reflection Example

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

HTML:

<div class="reflection-demo">
  <div class="reflection-item">
    <div class="reflection-arrow normal-arrow">&uarr;</div>
    <p>Original</p>
  </div>
  <div class="reflection-item">
    <div class="reflection-arrow flipped-arrow">&uarr;</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: scaleY(1);
}
.flipped-arrow {
  transform: scaleY(-1);
}

The first arrow points upward. The second is reflected vertically and points downward.

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 vertical 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-top">Top</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: 130px;
  background-color: #f1f1f1;
}
.origin-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 60px;
  color: #fff;
  background-color: #3498db;
  transform: scaleY(1.5);
}
.origin-center {
  transform-origin: center center;
}
.origin-top {
  transform-origin: center top;
}

The first box expands equally upward and downward because its transform origin is centered.

The second box expands downward because its top 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 scaleY() function can be animated using CSS transitions and keyframe animations.

Vertical Expansion

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

.panel-trigger {
  position: relative;
}
.panel-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 6px;
  background-color: #3498db;
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 0.3s ease;
}
.panel-trigger:hover::after,
.panel-trigger:focus-visible::after {
  transform: scaleY(1);
}

The decorative element begins vertically collapsed and expands to its full height over 0.3 seconds.

Vertical Reflection Transition

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

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

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

Keyframe Animation

The following animation repeatedly expands and contracts an element vertically:

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

The element grows to 125% of its original height 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,
  .panel-trigger::after {
    transition: none;
  }
}

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

Common Uses

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

• Vertical resizing: Stretch or compress elements along the Y axis.
• Reflected graphics: Flip arrows, icons, and decorative images vertically.
• Navigation effects: Animate decorative elements that expand from the top or bottom.
• Progress indicators: Visually expand a bar upward from its bottom edge.
• Hover effects: Increase the height of decorative elements for emphasis.
• Animated panels: Create vertical opening and closing effects.
• Decorative shapes: Change the proportions of graphics and backgrounds.
• Transform combinations: Combine vertical scaling with rotation, translation, or horizontal scaling.

For example, a vertical progress indicator can use vertical scaling:

.progress-track {
  width: 12px;
  height: 150px;
  background-color: #ddd;
}
.progress-fill {
  width: 100%;
  height: 100%;
  background-color: #3498db;
  transform: scaleY(0.65);
  transform-origin: center bottom;
}

The filled bar appears to occupy 65% of the track's height while remaining anchored to the bottom 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 scaleY() function has several requirements and behaviors to consider.

• The function requires exactly one scaling factor.
• The scaling factor uses a unitless number.
• A factor of 1 preserves the original vertical size.
• Values greater than 1 enlarge the element vertically.
• Values between 0 and 1 reduce the visible height.
• Negative values reflect the element vertically.
• A factor of zero visually collapses the vertical dimension.
• The element's width remains unchanged by scaleY() 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 vertically.
• 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: scaleY(1.5);

The following is also valid:

transform: scaleY(-1);

The following is invalid because no scaling factor is provided:

transform: scaleY();

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

transform: scaleY(1.5, 0.75);

To scale both axes independently, use scale().

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

transform: scaleY(150px);

Separate transform declarations do not accumulate:

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

The second declaration replaces the first.

To combine both transformations, write:

.box {
  transform: scaleY(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 scaleY() 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 scaleY() function is defined in the CSS Transforms Module Level 1 specification.

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

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