The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →To mirror an image from left to right, keep the image in your HTML and apply transform: scaleX(-1). Use scaleY(-1) for a top-to-bottom mirror, or rotate(180deg) when you want the picture upside down rather than reflected.
<img class='mirror' src='photo.jpg' alt='Description of the image'>
.mirror {
transform: scaleX(-1);
}Choose the effect you actually want
“Flip” can describe several different visual operations. Pick the transform that matches the result you need:
| Desired result | CSS | Meaning |
|---|---|---|
| Left-right mirror | transform: scaleX(-1) |
Reflects the image across a vertical axis. Text and other directional details appear reversed. |
| Top-bottom mirror | transform: scaleY(-1) |
Reflects the image across a horizontal axis. |
| Upside down | transform: rotate(180deg) |
Rotates the image in the plane; it is not the same operation as a mirror. |
| 3D card-turn effect | Usually a perspective parent with rotateY() |
Creates a spatial animation or two-sided card effect rather than a static 2D reflection. |
The transform property changes the element’s visual coordinate space. It does not normally change the space reserved for the element in document flow. MDN Web Docs classifies transform as Baseline Widely available, with cross-browser availability since September 2015.
Mirror an image horizontally
Put a class on only the image that should be reflected:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<img class='mirror-horizontal' src='portrait.jpg' alt='Portrait of a person'>.mirror-horizontal {
transform: scaleX(-1);
}This is the usual “mirror image” solution. The source file is unchanged; the browser reflects its rendered pixels. The alt text remains the same because it describes the image’s meaning, not its display direction.
Mirror every matching image
If a whole group needs the same treatment, reuse the class:
<img class='mirror-horizontal' src='one.jpg' alt='First example'>
<img class='mirror-horizontal' src='two.jpg' alt='Second example'>A class is safer than an img selector because it prevents unrelated images, logos, icons, or user avatars from being reversed accidentally.
Mirror an image vertically
For a reflection across a horizontal axis, replace scaleX with scaleY:
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →<img class='mirror-vertical' src='landscape.jpg' alt='Mountain landscape'>.mirror-vertical {
transform: scaleY(-1);
}The top of the image becomes the bottom while its left and right sides stay in place. This is useful for an upside-down reflection beneath an object, but it is different from rotating the entire image.
Turn an image upside down
Use a 180-degree rotation when every part of the image should turn around:
<img class='upside-down' src='sign.jpg' alt='A sign'>.upside-down {
transform: rotate(180deg);
}A horizontal mirror changes left and right without changing which edge is top. A 180-degree rotation changes both axes. Choosing the wrong operation is the most common reason a “flipped” image looks incorrect.
Apply the transform to the right element
Place the class on the image when only its pixels should mirror:
<div class='frame'>
<img class='mirror-horizontal' src='photo.jpg' alt='Example photo'>
<span class='caption'>This caption stays readable</span>
</div>.frame {
display: grid;
gap: 0.5rem;
}
.mirror-horizontal {
transform: scaleX(-1);
}Apply the transform to a wrapper only when the wrapper’s contents should transform together. If the caption, badge, or controls belong outside the reflected artwork, transforming the wrapper will reverse those elements too.
Why the layout can look unchanged
Transforms affect visual rendering without reallocating normal flow layout. The browser still reserves the image’s ordinary dimensions, even though its painted pixels are reflected. A transformed element also creates a stacking context and establishes a containing block for positioned descendants. Those side effects matter when you use positioned overlays, z-index, or descendants that rely on a containing block.
Control the pivot with transform-origin
Scaling and rotation occur around the element’s transform origin. The default origin is the center, which is normally exactly what a static mirror needs:
.mirror-horizontal {
transform-origin: center;
transform: scaleX(-1);
}Set another origin when a design requires a special pivot, such as an edge:
.flip-from-left {
transform-origin: left center;
transform: scaleX(-1);
}Changing the origin does not change the mirror axis itself; it changes the point around which the scale operation is calculated. Test edge pivots with the actual image dimensions and surrounding overflow rules.
Combine transforms carefully
You can list more than one transform function, but order matters. The functions are composed in the order written, so changing their order can produce a different visual result:
.mirrored-and-tilted {
transform: scaleX(-1) rotate(8deg);
}.tilted-and-mirrored {
transform: rotate(8deg) scaleX(-1);
}Use one declaration for the complete effect. Separate transform declarations do not accumulate; the later declaration replaces the earlier one. If an existing rule already rotates or scales an image, combine the functions in a single transform list instead of adding a second declaration that silently discards the first.
Add a user-controlled flip
CSS supplies the visual effect, but CSS alone does not provide a toggle or interactive state. Use an operable control and add or remove a modifier class:
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11<button type='button' id='flip-button' aria-pressed='false'>Mirror image</button>
<img id='preview' src='photo.jpg' alt='Product preview'>#preview {
transition: transform 220ms ease;
}
#preview.is-mirrored {
transform: scaleX(-1);
}
const button = document.querySelector('#flip-button');
const image = document.querySelector('#preview');
button.addEventListener('click', () => {
const mirrored = image.classList.toggle('is-mirrored');
button.setAttribute('aria-pressed', String(mirrored));
});The button remains usable from the keyboard and exposes its state through aria-pressed. Do not make a flip action available only on hover: hover is unavailable to keyboard and touch users.
Respect reduced-motion preferences
A static mirror is not an animation. If you animate the transition, scaling and zooming can trigger migraines for some people. Provide a way to turn motion off and honor the user’s operating-system preference:
@media (prefers-reduced-motion: reduce) {
#preview {
transition: none;
}
}Keep the image understandable when motion is disabled; the final mirrored state should not be required to understand essential content.
When a 3D card flip is the right design
A card turning over in space is a different effect from reflecting one bitmap. It normally uses a perspective on a containing space and a 3D transform such as rotateY(180deg):
Recommended Free Tools
.card-space {
perspective: 800px;
}
.card {
transform-style: preserve-3d;
transition: transform 300ms ease;
}
.card.is-turned {
transform: rotateY(180deg);
}Use this pattern for a front-and-back card interface, not for a simple static mirror. A 2D image does not need perspective merely to reverse its left and right sides.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Common problems and fixes
The image did not flip
- Confirm that the class is on the element being rendered and that the stylesheet is loaded.
- Check that another rule is not replacing
transform. Combine all required functions in one declaration. - Inspect the element in browser developer tools and verify that the rule is not crossed out by a more specific selector.
The wrong direction changed
- Use
scaleX(-1)for left-right reflection. - Use
scaleY(-1)for top-bottom reflection. - Use
rotate(180deg)for an upside-down image.
The caption or controls are reversed too
You transformed a wrapper instead of the image. Move the class to the image, or restructure the wrapper so only the artwork is inside the transformed element.
The image appears to move or overlap nearby content
The transform does not change normal flow dimensions, but the painted result can extend into neighboring visual space. Check overflow, stacking order, and the element’s stacking context. Adjust the wrapper or origin rather than relying on a second transform declaration.
The animation causes discomfort
Remove the transition for reduced-motion users with prefers-reduced-motion: reduce, and provide an explicit control to disable the animation.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The flip looks like a card turn
Remove perspective and 3D transforms for a simple mirror. Use the 2D scaleX or scaleY declaration instead.
Check the result at the page level
For a quick visual check, load the page in each browser and viewport your project supports. A transform is widely available, but the surrounding layout, overflow, positioned descendants, and animation preferences still determine whether the final composition looks correct. Verify keyboard access to any flip control and check that alternative text remains meaningful.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If your goal is to capture a page that already contains the flipped image, ScreenshotNeo can render the URL and return a screenshot or PDF through one request. It is useful when you need an automated artifact rather than a manual browser capture. The page itself still needs the HTML and CSS shown above.
Use the API documentation at https://screenshotneo.com/docs/ for request details. A basic cURL request is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/flipped-image -o shot.webpThe same request in Python:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://example.com/flipped-image"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)And in Node.js:
const q = new URLSearchParams({
access_key: 'YOUR_API_KEY',
url: 'https://example.com/flipped-image'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
require('node:fs').writeFileSync('shot.webp', data);ScreenshotNeo accepts cookie or consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status with X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
Every plan includes the full feature set, including full-page captures with lazy images loaded, CSS-selector element capture, dark mode, device presets and custom viewports, retina scale, PDF controls, custom CSS and JavaScript, click-before-capture actions, hidden selectors, selector/delay/network-idle waits, request and resource blocking, custom headers, cookies, user agents and Authorization, timezone and geolocation, transparent backgrounds, resizing, selectable-TTL caching, signed image links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, a usage API, an OpenAPI specification, and compatible parameter names for easier migration.
| Plan | Allowance | Price |
|---|---|---|
| Free | 1,000 shots per month | No card required |
| Starter | 3,000 shots | $5 |
| Growth | 15,000 shots | $15 |
| Pro | 60,000 shots | $39 |
| Scale | 250,000 shots | $99 |
| Business | 1,000,000 shots | $249 |
Yearly billing gives two months free. The free allowance includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account when you are ready to capture your rendered pages.
FAQ
Does flipping rewrite the image file?
No. A CSS transform changes how the browser paints the element. The original JPEG, PNG, or WebP remains unchanged unless you separately export or edit it.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsCan I mirror an image without changing its HTML dimensions?
Yes. The transform leaves the element’s normal flow allocation in place, so its layout dimensions remain those established by the image and its CSS.
Why is the text inside an image unreadable after a mirror?
A horizontal reflection reverses every pixel, including lettering. Use an unmirrored version when text must remain readable, or place readable text in a separate HTML element that is not transformed.
Frequently Asked Questions
Does flipping an image rewrite the image file?
No. CSS changes only the browser’s rendering; the original image file is unchanged.
Can I mirror an image without changing its HTML dimensions?
Yes. The transform changes visual rendering while the element keeps its normal flow allocation.
Free tools Windows power users keep installed
One-click scans. No signup required.
Why is text inside a mirrored image backwards?
The reflection reverses all pixels, including lettering. Keep required text outside the transformed image or use an unmirrored asset.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
