Flip an image on the horizontal axis using CSS

You can flip an image on the horizontal axis using CSS. The primary method for achieving this is by using the transform property with the scaleX transformation. Here's how you can do it:

CSS Method: Using transform: scaleX(-1)

To flip an image horizontally, you'll apply a negative scale value to the x-axis:

<img src="your-image.jpg" alt="Example Image" class="flipped-image">

.flipped-image {
    transform: scaleX(-1); /* Flips the image horizontally */
}

Explanation

scaleX(-1): This transformation flips the image across the vertical axis, effectively mirroring it. You can add additional styles, such as transition, to animate the flipping effect if desired. 

Example with Transition Effect

If you want to add a smooth transition effect when hovering over the image, you can combine the transform with a transition property:

.flipped-image {
    transition: transform 0.3s ease; /* Adds a transition effect */
}

.flipped-image:hover {
    transform: scaleX(-1); /* Flips the image on hover */
}

Additional Method: Using CSS filter

Although the transform property is the most straightforward method, you can also achieve a horizontal flip using the filter property with a combination of grayscale and hue-rotate:

.flipped-image {
    filter: grayscale(100%) hue-rotate(180deg);
}

However, this method is generally not recommended for simple horizontal flips, as it can affect color and may not be as intuitive.

Conclusion

Using transform: scaleX(-1) is the most effective and straightforward method for flipping images horizontally in CSS. You can also enhance the user experience with transitions if interactivity is desired.