What happens when you use negative values in scale()?

Q: What happens when you use negative values in scale()?

In CSS, the `scale()` function resizes elements along the X and Y axes. When you use negative values in `scale()`, the element is not only resized but also **flipped** (mirrored) along the specified axis. `scale(-1)` — flips the element both horizontally and vertically while keeping its original size. `scaleX(-1)` — flips the element horizontally (like a mirror reflection). `scaleY(-1)` — flips the element vertically (upside down). `scale(-2)` — flips and doubles the element’s size in both directions. .box1 { transform: scale(-1); } /* Flips horizontally and vertically */ .box2 { transform: scaleX(-1); } /* Flips horizontally */ .box3 { transform: scaleY(-1); } /* Flips vertically */ In this example, `.box1` mirrors the element both ways, `.box2` flips it horizontally, and `.box3` flips it vertically. This can be useful for creating reflections or reversing animations. Negative scaling inverts the element’s orientation — useful for mirror or reflection effects. Combine with `transition` or `animation` for smooth flip animations. Be aware that text inside flipped elements also appears reversed. Use `transform-origin` to control the flip axis (e.g., flip from the left edge instead of center). .card { transition: transform 0.6s ease; transform-origin: center; } .card:hover { transform: scaleX(-1); } Here, the `.card` flips horizontally when hovered. Adjusting the `transform-origin` allows control over the direction and pivot of the flip.

Difficulty: 5/10

transform, scale(), layout effects

Using Negative Values with scale() in CSS

In CSS, the scale() function resizes elements along the X and Y axes. When you use negative values in scale(), the element is not only resized but also flipped (mirrored) along the specified axis.

How Negative Scale Values Work

1
scale(-1) — flips the element both horizontally and vertically while keeping its original size.
2

What happens when you use negative values in scale()?

Difficulty: 5/10

transform, scale(), layout effects

Using Negative Values with scale() in CSS

How Negative Scale Values Work

1
scale(-1) — flips the element both horizontally and vertically while keeping its original size.
2

What happens when you use negative values in scale()?

Using Negative Values with scale() in CSS

What happens when you use negative values in scale()?

Using Negative Values with scale() in CSS

Scenario Questions

Follow-up Questions