To rotate an image by any degrees you want, you can use the rotate
CSS property. I learned that rotate
and transform
properties offer the same function to rotate something, but rotate
is more simple to use.
<img
src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg"
alt="firefox-logo"
class="image"
/>
.image {
/* rotate an image by 180 degrees */
rotate: 180deg;
/* or you can use `transform: rotate(0.5turn)` */
width: 120px;
height: 120px;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/rotate https://developer.mozilla.org/en-US/docs/Web/CSS/transform