In general terms, image rotation is a geometric transformation that maps the coordinates of each pixel in an image to a position by rotating it through a specified angle about an origin. It sounds complicated, right?
Actually, it’s not. In web design, image rotation is a common technique for creating interesting visual effects such as animations and transitions or simply orienting an image in a desired direction.
Image rotation can be used for web games, CAPTCHA tests, image processing, and many more. For example, a lot of Web3 apps and websites use image rotation in their interfaces. In this article, we’ll show you how to use plain CSS to rotate images. Let’s get started!
In this article:
- The transform Property
- Transform origin
- Rotate an Image on Transition
- Rotate an Image with Keyframe Animations
The transform property
The trick to rotating images with CSS is the transform property. The property allows you to apply various 2D and 3D transformation functions to an element, including rotation, scaling, skewing, and translation.
Below is the syntax for rotating an image using the transform property:
transform: rotate(angle)
- The
rotatefunction accepts ananglevalue, which can be specified in degrees (deg), radians (rad), or turns (turn). Positive values rotate the image clockwise, while negative values rotate it anticlockwise.
The rotate function also has different variants that you can use to rotate an element in a specific direction. These include:
rotate3d(): This rotates an element in 3D space around a custom axis defined by three values representing the x, y, and z axes, followed by the rotation angle.rotateX(): Rotates an element around the horizontal x-axis, making it appear to tilt forward or backward.rotateY(): Rotates an element around the vertical y-axis, creating a horizontal rotation effect.rotateZ();: This function rotates an element around the z-axis, which is perpendicular to the screen, resulting in a flat, 2D rotation within the plane of the screen.
Examples
Let’s take a look at the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rotating an image with CSS</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 70%;
width: 50%;
}
.container img {
height: 50%;
}
</style>
</head>
<body>
<div class="container">
<img
src="https://res.cloudinary.com/demo/image/upload/cld-sample.jpg"
alt="Example Image"
/>
</div>
</body>
</html>
Which renders the following output:
Now, let’s add the following code to the .container image class:
.container img {
height: 50%;
transform: rotate(90deg);
}
We see that the image is rotated 90 degrees clockwise:
This is achieved with the transform property.
Transform origin
By default, the rotate function makes the rotation occur around the center of the element. However, we can change the origin point of the rotation using the transform-origin property. The property accepts one or two values representing the x-axis and y-axis coordinates, respectively. These values can be specified as length values (e.g., px, em, %), keywords (top, right, bottom, left), or a combination.
If we modify the CSS code to this:
.container img {
height: 50%;
transform: rotate(90deg);
transform-origin: top left;
}
We’ll see the image is rotated 90 degrees clockwise starting from the top left corner of the picture, as shown below:
Rotate an Image on Transition
To create a transition effect when rotating an image, we can use the transition property as follows:
.container img {
height: 50%;
transition: transform 0.5s ease;
}
.container img:hover {
transform: rotate(120deg);
}
In this example, when we hover over the image, it rotates from 0 to 120 degrees with a smooth 0.5-second transition.
Rotate an Image with Keyframe Animations
Apart from transition animations, we can also use CSS keyframe animation to create more complex rotation effects. This allows us to define keyframes that specify the image’s rotated state at different points in the animation sequence.
Here’s an example:
@keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
.container img {
height: 50%;
animation: rotate 2s infinite linear;
}
In this example, we defined a keyframe rule named rotate that rotates the image 360 degrees. The animation takes 2 seconds to complete and loops infinitely. Below is the output:
Rotating Images with Cloudinary’s Image API
When building a web project that involves image manipulation, efficiency, and simplicity are key. Cloudinary’s Image API is a powerful tool that makes these tasks straightforward. This section focuses on using Cloudinary to rotate images, a common requirement for many web applications.
Cloudinary provides an easy-to-use syntax to perform complex image manipulation through simple URL parameters. The a_ (angle) parameter can be adjusted to rotate an image. This means you can set the degree of rotation directly in the image URL, which Cloudinary processes on the fly.
To rotate an image using Cloudinary’s Image API, you start with your base URL, add your Cloudinary account’s cloud name, and specify the image to manipulate. Below is a basic example of how to rotate an image by 90 degrees:
<img src="https://res.cloudinary.com/your_cloud_name/image/upload/a_90/sample.jpg" alt="Rotated Image">
In this snippet:
your_cloud_nameshould be replaced with the name of your Cloudinary account.a_90rotates the image 90 degrees clockwise.
For more dynamic scenarios, such as rotating an image based on user input or other runtime conditions, you can modify the rotation angle dynamically using server-side code or JavaScript. Here’s a simple JavaScript example to rotate an image based on a user-selected value:
function rotateImage(degree) {
const imageUrl = `https://res.cloudinary.com/your_cloud_name/image/upload/a_${degree}/sample.jpg`;
document.getElementById('dynamicImage').src = imageUrl;
}
This function updates the src attribute of an image with an ID of dynamicImage, applying the desired rotation dynamically.
Wrapping Up
Rotating images with CSS is an excellent technique for adding interactivity and livening up your web apps and designs. Combining CSS rotation with JavaScript can enable you to create complex animations or transitions.
However, when doing this, you should always remember to consider browser compatibility, accessibility, and performance implications to avoid creating a bad experience for your users.
Empower your development team with Cloudinary’s easy-to-use APIs and SDKs. Sign up for free today!