How to Flip an Image and Add a Mirror Effect With CSS

how-to-flip-an-image-and-add-a-mirror-effect-with-css

You may want to flip an image horizontally or vertically to create a mirror effect on your website.

It can be achieved using CSS transform property and its flip functions.

In this tutorial, we will show you how to flip an image and add a mirror effect with CSS.

CSS Transform Property

The CSS transform property is used to apply a 2D or 3D transformation to an element.

It allows you to rotate, scale, skew, and translate an element.

In this case, we will be using the scaleX() function to flip the image horizontally.

HTML Markup

To flip an image, we first need to create an HTML element for the image.

You can use the following code to create an image element:

<img src="image.jpg" alt="Flipped Image">

CSS Styles

Now, we can add the CSS styles to flip the image and add the mirror effect.

You can use the following code to flip the image horizontally:

img {
  transform: scaleX(-1);
}

The scaleX() function takes a value of -1 to flip the image horizontally.

You can also use the scaleY() function to flip the image vertically.

Final Result

With these simple steps, you can flip an image and add a mirror effect with CSS.

Here is the complete code for your reference:

<html>
  <head>
    <style>
      img {
        transform: scaleX(-1);
      }
    </style>
  </head>
  <body>
    <img src="image.jpg" alt="Flipped Image">
  </body>
</html>

Conclusion

In conclusion, flipping an image and adding a mirror effect with CSS is easy and can be achieved using the CSS transform property and its flip functions.

This can add an interesting effect to your website and enhance its visual appeal.

I hope this article has helped you learn how to flip an image and add a mirror effect with CSS.

Tags

Related Posts