Free · Fast · Privacy-first

CSS Flip Image

CSS can flip any element horizontally or vertically using negative scale values.

⚡

Horizontal flip with scaleX(-1), vertical flip with scaleY(-1)

🔒

Combine both for full 180-degree mirror

✨

Works on images, icons, SVGs, and any HTML element

⚡

RTL direction-aware flip pattern with [dir="rtl"] selector

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Transform Gen to your website

Drop the Transform Gen into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/transform-gen?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Transform Gen by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/transform-gen?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Transform Gen by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

How CSS Flip Works, RTL Layout Applications, and Animated Flip Patterns

Negative scale values mirror the element across an axis. scaleX(-1) multiplies the X coordinates of all points by -1, reflecting them across the vertical axis at the transform origin. The element appears as its own mirror image. This does not change the element's layout dimensions or position; it only affects visual rendering. scaleY(-1) reflects points across the horizontal axis, producing an upside-down version of the element. Both transforms run on the GPU compositor at the same performance level as any other scale transform. The element's text, if present, will appear mirrored, so negative scale flips are typically used on images, icons, and decorative elements rather than text containers.

RTL (right-to-left) layout support is one of the most practical uses of CSS flip. Directional icons such as arrows, chevrons, navigation indicators, and speech bubbles need to point in the opposite direction for RTL languages. The standard approach is to keep a single SVG or image asset and apply transform: scaleX(-1) inside a [dir="rtl"] selector. This avoids maintaining separate LTR and RTL asset sets and ensures any icon updates propagate to both directions automatically. The transform is applied to the icon element or its parent, and the browser handles the mirror at render time with no additional network requests.

Animated flips use the same scaleX(-1) technique in a transition or @keyframes context. A card that flips on click transitions from scaleX(1) to scaleX(-1) over 400ms. Unlike rotateY(180deg) which produces a 3D flip with perspective depth, an scaleX(-1) flip is a 2D mirror that flips instantly through the zero point without perspective foreshortening. For a more realistic 3D flip, combine scaleX(-1) with rotateY, or use a full 3D card flip setup with preserve-3d and backface-visibility. For a quick 2D icon flip toggle such as expand and collapse indicators, the scaleX(-1) transition is simpler and sufficient.

Flip transforms have a known cross-engine quirk: when an element animates from scaleX(1) to scaleX(-1) the browser must pass through scaleX(0), which collapses the element to a single line of pixels at the midpoint. Chrome and Edge render this midpoint as a clean vertical line, Firefox produces a similar result, and Safari occasionally shows a brief flicker on retina displays as the rasterizer drops below subpixel resolution. The visual effect is so brief that most users will not notice, but on slow animations longer than 600ms the collapse becomes visible. To eliminate the collapse entirely, animate through rotateY(0deg) to rotateY(180deg) inside a perspective context instead, which produces a proper 3D flip with depth and no zero-width midpoint frame.

MDN: scaleX()MDN: CSS logical properties

How to use this tool

💡

Select horizontal flip, vertical flip, or both from the toggle. The preview element updates immediately. For animated flips, enable the transition option to add a transition: transform declaration. Copy the CSS output for use in your stylesheet.

How It Works

Step-by-step guide to css flip image:

1
Choose the flip direction
Select horizontal flip (scaleX(-1)), vertical flip (scaleY(-1)), or both. The preview updates immediately to show the mirrored result.
2
Set transform-origin if needed
For most flip effects, the default center origin is correct. If the flip should hinge from an edge, adjust the origin using the origin grid.
3
Enable transition for animated flips
Toggle the transition option to add transition: transform 400ms ease to the output. Adjust the duration value to match your design timing.
4
Copy the CSS
Click Copy Code to export the transform declaration. For RTL support, the output optionally includes a [dir="rtl"] selector wrapper.

Real-world examples

Common situations where this approach makes a real difference:

RTL navigation arrow icon

A multi-language application uses a right-pointing chevron SVG icon in breadcrumb navigation. For Arabic and Hebrew pages, the chevron should point left. The developer adds a single CSS rule: [dir="rtl"] .nav-icon { transform: scaleX(-1); }. Setting dir="rtl" on the html element for RTL locale pages automatically applies the flip to every navigation icon on the page. No separate SVG assets are needed.

Image reflection effect

A product showcase page features a device mockup with a reflection below it to suggest a glossy surface. The developer duplicates the mockup image in an aria-hidden container, applies scaleY(-1), and overlays a CSS gradient from transparent to white using a ::after pseudo-element on the container. The CSS-only reflection matches the mockup position precisely and scales correctly at all viewport widths without JavaScript or image editing.

Expand/collapse indicator flip

An accordion component uses a down-arrow icon that flips to an up-arrow when the panel is open. The base state is scaleY(1). The open state class applies scaleY(-1). transition: transform 250ms ease on the base icon element animates the flip. The generator confirms scaleY(-1) produces the correct upward-pointing arrow and validates the transition timing before the CSS is committed to the component.

Mirrored decorative element pair

A landing page hero has two decorative leaf SVG elements flanking the headline, one on each side as a mirror pair. Rather than maintaining two separate SVG assets, the developer uses a single leaf SVG and applies transform: scaleX(-1) to the right-side instance. The CSS is generated in seconds and the layout uses flexbox with the same element class, keeping the template simple and the asset library small.

Pro tips

Get better results with these expert suggestions:

scaleX(-1) is identical to rotateY(180deg) in 2D but cheaper in 3D contexts

In a flat 2D context without perspective, scaleX(-1) and rotateY(180deg) produce the same visual result: a horizontally mirrored element. However, in a 3D context with preserve-3d, rotateY(180deg) actually rotates the element in 3D space, showing the back face. scaleX(-1) mirrors without any Z-depth change. Choose based on whether the intent is a flat mirror or a 3D rotation.

Use logical CSS properties instead of flip for text direction

For layout mirroring in RTL, CSS logical properties like margin-inline-start, padding-block-end, and border-inline-start are the modern approach. They automatically adapt to the writing direction. Reserve scaleX(-1) for visual assets like icons and images that cannot be expressed as logical properties. Mixing both approaches keeps each concern in the right layer of the system.

Animated flip needs transition on the base element, not the state class

For a toggle flip animation where JavaScript adds a flipped class with scaleX(-1), the transition: transform declaration must be on the base element, not on the .flipped class. The browser applies the transition when the value changes from the base state to the flipped state. If transition is only on .flipped, the forward flip animates but the reverse flip when the class is removed snaps instantly.

Vertical flip with scaleY(-1) is useful for reflection effects

A water reflection effect places a copy of an element below the original with scaleY(-1) applied. Add a linear gradient overlay using a ::after pseudo-element fading from transparent to the background color to fade out the bottom of the reflection. This produces a simple but effective reflection without image editing. The copied element should be aria-hidden="true" to keep it invisible to screen readers.

Use [dir="rtl"] for automatic icon flipping in RTL layouts

Placing transform: scaleX(-1) inside a [dir="rtl"] selector applied to the html element automatically mirrors all elements with the flip class across the entire page. This is more maintainable than manually flipping individual icons. Set dir="rtl" on the html tag when serving RTL language pages and let the CSS rule handle all icon mirroring.

Apply flip to the img element, not the figure container

Applying scaleX(-1) to a figure or container element also flips any text captions inside it. Target the img or SVG element directly to flip only the visual asset. If the flip must be on a container for layout reasons, add an opposite scaleX(-1) to the text children to cancel the inherited flip.

Combine flip with CSS filter for stylized effects

Combining scaleX(-1) with CSS filter properties like grayscale(100%) or hue-rotate(180deg) creates stylized image effects without Photoshop. Apply both transform and filter to the same img element. Both properties run on the compositor and compose together without performance overhead.

FAQ

Frequently asked questions

Apply transform: scaleX(-1) to the img element. This mirrors the image along its vertical axis, producing a left-right flip. The image dimensions and layout position are unchanged; only the visual rendering is mirrored. You can add this to a CSS class and toggle it with JavaScript, or apply it directly to a selector. The transform runs on the GPU compositor and has no performance cost beyond any other CSS transform.

In a flat 2D context without perspective, both produce a horizontally mirrored element and are visually identical. The technical difference is that rotateY(180deg) rotates the element in 3D space around its Y axis, which in a 3D context with preserve-3d would show the back face of the element. scaleX(-1) simply negates X coordinates and has no Z-depth component. For a flat icon flip, scaleX(-1) is simpler. For a full 3D card flip that reveals a different back face, use rotateY(180deg) with a 3D setup.

CSS flip transforms do not affect the accessibility tree. The image element remains in the DOM with its original alt text and ARIA attributes unchanged. Screen readers announce the image normally. For decorative mirrored copies of images used for reflection effects, set aria-hidden="true" on the duplicate element so screen readers do not announce the same image twice.

Yes. transform: scaleX(-1) applies to video elements the same as images. This is useful for mirror-mode webcam feeds where the video should appear as users expect when looking at their own face. Apply scaleX(-1) to the video element in CSS. The transform runs on the GPU and does not affect the underlying video stream data; only the visual rendering is mirrored.

Add transition: transform 400ms ease to the base element. Create a toggled class with transform: scaleX(-1). Use JavaScript to add and remove the class on click. The browser applies the transition when the transform value changes in either direction. Do not put the transition only on the toggled class, or the reverse animation will snap instantly when the class is removed.

Yes. If scaleX(-1) is applied to a container element, all child elements including text will appear mirrored. Text becomes a mirror-image reflection that is unreadable. To flip only a visual asset inside a container, apply the transform directly to the asset element such as the img or SVG, not to the parent container. If the flip must be on the container, apply scaleX(-1) on the text children to cancel the mirror effect on text.

Yes, for most cases. Using CSS scaleX(-1) for RTL icon flipping reduces asset count, keeps the codebase DRY, and ensures both directions always show the same icon style because they reference the same asset. The only case where separate assets are preferable is when the LTR and RTL versions are not true mirrors, for example when the RTL version has design differences beyond a simple flip, such as different stroke widths or ornamental elements that should not be mirrored.

The standard CSS flip using scaleX(-1) or scaleY(-1) always mirrors around the transform-origin. By default that is the element center. To flip around an edge, set transform-origin to that edge first: transform-origin: left center for a left-edge mirror. Setting a non-center origin with a negative scale does not produce an intuitive hinge flip; it shifts the element visually because the reflection axis moves. For a hinge-like flip around an edge, rotateY(180deg) with transform-origin at the hinge edge produces a more natural 3D result.

Wrap the transition on the flipping element in @media (prefers-reduced-motion: no-preference) so the flip animation only runs when motion is permitted. For users who prefer reduced motion, swap the icon or asset directly without any transition, or replace the flip with an opacity crossfade between the two states. Flip animations are particularly disorienting when used as state indicators because they continuously deform the element through a thin midpoint, which is harder for vestibular-sensitive users than a simple fade. The media query check costs nothing at runtime and is the standard accessibility-compliant fallback.

Any non-default transform value, including scaleX(-1), creates a new stacking context on the element it is applied to. Children of the flipped element are stacked only against each other inside that context, not against unrelated elements outside the parent. A tooltip rendered inside a flipped icon container cannot rise above sibling layout elements using z-index alone. The fix is to portal the floating descendant to document.body so it sits outside the flipped stacking context, or to move the flip from the container to the visual child element so the parent stacking context remains intact for layered descendants. A second subtle effect is that hit-testing for pointer events still uses the original geometry on most browsers but the rendered pixels appear mirrored, which can produce confusing results when a flipped icon is also a clickable target with non-symmetric padding. Verify the click target by hovering near each edge of the flipped element and confirming the cursor changes to a pointer where you expect, or restructure the markup so the click handler lives on a non-flipped wrapper while only the visual asset inside is flipped. This pattern also keeps screen-reader focus order stable, because focus rectangles are drawn against the untransformed parent and remain readable for keyboard users who cannot perceive the horizontal mirror visually.