EN
CSS - flip image both vertically and horizontally
0
points
In this article, we would like to show you how to flip image both vertically and horizontally using CSS.
Quick solution:
.flipped {
transform: scale(-1, -1);
}
or:
.flipped {
transform: rotateX(180deg) rotateY(180deg);
}
Practical examples
1. Using scale(-1, -1)
In this example, we use transform CSS property with scale() function set to (-1, -1) to flip the image vertically and horizontally.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.flipped {
transform: scale(-1, -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 rotateX(180deg) rotateY(180deg)
In this solution, we rotate the image by an angle of 180 degrees using rotateX() and rotateY() functions.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.flipped {
transform: rotateX(180deg) 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>