Image rotation with HTML and CSS

Images are crucial for conveying information and enhancing the appearance of your website. You can use them for creating stunning visuals such as product images, banners, illustrations, and more.

Sometimes you might want to rotate or flip images on your page to fit specific visual requirements for your business.

This article will discuss how to rotate and flip images in your HTML using the CSS transform operations.

Later we will look at ImageKit's real-time image transformations that will help you achieve similar effects across platforms without relying on CSS.

Image rotation and flip operations using CSS and HTML

You can apply CSS functions to an image to create transformations such as rotation, flip, and other effects. We will utilize the following CSS functions and build different effects -

1. rotate() function
2. scaleX() function
3. scaleY() function

For demonstration, we have picked up the following image by Helena Lopes from Pexels.

This image has been stored in the free integrated media library offered by ImageKit.io.

ImageKit is a complete image and video management and delivery product that helps us optimize image delivery in real-time with no effort. The image stored on ImageKit is accessible here -

https://ik.imagekit.io/ikmedia/rotation-blog/suv-image_CydtbqUYa.jpg

You can sign up on ImageKit for free forever and store your images and videos there. You can also deliver optimized content with a CDN directly on your website and apps using ImageKit URLs.

Using the img tag, we can embed this image on our website.

<img src="https://ik.imagekit.io/ikmedia/rotation-blog/suv-image_CydtbqUYa.jpg" alt="Flatiron Building" />

Let's use different CSS functions to achieve different visual effects on these images.

Image Rotation using rotate() Function

As the name suggests, you can use the rotate(arg) function to rotate an image in a two-dimensional space. The image is rotated based on the argument passed to this function in CSS-supported units, such as degree, gradian, turn, or radian.

The CSS sample below rotates the image by 180 degrees:

img {
    transform: rotate(180deg);
}

The resultant image is shown below -

We can also provide a negative value to rotate the image in a counter-clockwise direction. Here we are trying to rotate an image by 40 degrees in the counter-clockwise direction.

img {
	transform: rotate(-40deg)
}

Similarly, you can use other values in the rotate function to rotate the image according to your requirements.

Continuously rotating the image using CSS for an animated effect

We can also use CSS's animation and keyframes properties to create an animation without using any Javascript or other third-party library.

Let's look at a simple animation where we will rotate an image continuously and set the image to complete one rotation in 6 seconds. The keyframes definition defines the rotation, whereas the animation property defines the animation's timing and repetition.

img{
  width: 300px;
  animation: rotation 6s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

The resulting animation looks like this -

Flip an image using the CSS transform property

The scaleX and scaleY functions can be used to flip the image horizontally or vertically, respectively. To flip the image, we must pass a negative value to these functions. A negative value  -1 also preserves the original aspect ratio while flipping.

For example, the below CSS flips the image horizontally.

img {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}

The result is a horizontally-flipped mirror image of our original image.

Similarly, passing a value of -1 to the scaleY function will flip the image vertically.

Dynamic Image Rotation using ImageKit

In the above examples, we rotated the image using CSS properties. CSS is restricted to use in web browsers only.

Therefore, if we have to rotate an image on any other platform, send it out in an email that doesn't support advanced CSS functions, or do not rely on CSS in general, then we need an alternative way to rotate the image.

ImageKit is a real-time transformation, optimization, and storage service that allows you to manipulate images and videos in real-time using an easy-to-use URL-transformation API.

Rotating images in real-time with the rotate parameter

Using ImageKit's transformations is simple. You just need to specify the transformation in the specified format in the URL.

To rotate the image, ImageKit provides the rt parameter. To rotate the image by 180 degrees, we need to add rt-180 transformation parameter to the URL, as shown below.

https://ik.imagekit.io/ikmedia/rotation-blog/suv-image_CydtbqUYa.jpg?tr=rt-180

The resulting image is the same as passing 180deg to the rotate function in CSS.

We can then use this URL directly in our HTML, our apps, or an email without having to worry about whether the end device supports CSS or not.

<img src="https://ik.imagekit.io/ikmedia/rotation-blog/suv-image_CydtbqUYa.jpg?tr=rt-180" alt="180 degree rotated building" />

We can also pass a negative value to the rt parameter to rotate the image in a counter-clockwise direction.

To rotate the image by 40 degrees in the counter-clockwise direction, we need to add rt-N40 parameter to the URL. The resulting image is the same as that obtained by passing a negative value to the rotate function in CSS.

https://ik.imagekit.io/ikmedia/rotation-blog/suv-image_CydtbqUYa.jpg?tr=rt-N40

We can also resize the image in real-time using the same URL-based image transformation API. To resize the image to 500px width while rotating it, we need to add w-500 to the above URL.

https://ik.imagekit.io/ikmedia/rotation-blog/suv-image_CydtbqUYa.jpg?tr=rt-N40,w-500

Our resulting image is rotated by 40 degrees and is resized to 500px width.

Note: Resizing with ImageKit is different than resizing using the width property in CSS. With ImageKit's resizing, the image downloaded over the network is already resized and is hence smaller in size. With CSS-based resizing, the full resolution image is downloaded on the user's device resulting in unnecessary bandwidth consumption and then resized on the user's device.

Conclusion

Image rotation can come in handy when the original image needs to be modified to create the right visual effects on your website or app.

You can use CSS transformation functions to achieve this with minimal effort. But this makes the image rotation specific to web and mobile web platforms that support the required CSS.

ImageKit is a real-time image transformation, optimization, and management product that allows us to manipulate images in real-time using a URL-based API. It provides the rt parameter to rotate the image and more than 50 other URL-based parameters to manipulate images and videos on websites and apps in real-time.

It also offers ample media storage and optimized delivery bandwidth for free every month. You can get started with ImageKit by signing up for a free account and taking advantage of its real-time optimizations and transformations to deliver media on your website.