How to flip image with CSS?
The image is flipped to create a mirror image. Flip an image means rotating the image horizontally or vertically. In this tutorial, we will be learning about the CSS property to flip an image.
Flip image with CSS
The transform: scalex(-1) property is used to flip the image. The transform property is used to rotate the image and scalex(-1) rotates the image to axial symmetry. Hence the original image is flipped to its mirror image.
Example: Flip image with CSS
In this example, we have flipped the image to create the mirror image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.flip-img {
transform: scalex(-1);
}
</style>
</head>
<body>
<h2> Original image </h2>
<img class="original image" src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628495082-101156.png" alt="img1">
<h2> flip image </h2>
<img class="flip-img" src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628495082-101156.png" alt="img1">
</body>
</html>
Output
Here is the output of the above example.
Example: Flip the image vertically
We can alternatively use transform:rotate(180deg) to flip the image. Here, we have rotated the image 180 degrees.
Conclusion
In this tutorial, we have learned to flip images with CSS. We can do so using transform property. We can flip images horizontally or vertically depending on our choice.
