EN
CSS - flip image horizontally
0
points
In this article, we would like to show you how to flip image horizontally using CSS.
Quick solution:
.flipped {
transform: scaleX(-1);
}
or:
.flipped {
transform: rotateY(180deg);
}
Practical examples
1. Using scaleX(-1)
In this example, we use transform css property with scaleX() function set to -1 to flip image horizontally and get the mirror image.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.flipped {
transform: scaleX(-1);
}
</style>
</head>
<body>
<div>Original image:</div>
<img src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />
<br>
<div>transformed image</div>
<img class="flipped" src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />
</body>
</html>
2. Using rotateY(180deg)
In this solution, we rotate the image by an angle of 180 degrees using rotateY() function.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.flipped {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div>Original image:</div>
<img src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />
<br>
<div>transformed image</div>
<img class="flipped" src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />
</body>
</html>