In this article, we will discuss the CSS rotate animation. We can animate elements to make the web page look eye-catching.
The "animation" property and the "transform" property of CSS allow us to animate HTML elements.
Syntax of properties utilized for rotating the HTML element:
transform: rotate(degree);
animation: rotate time duration;
The "transform" CSS property accepts values in the format rotate(degree), while the "animation" CSS property accepts values in the format rotate, time, and duration.
Demonstrations of CSS Rotate Animation
Let's explore the CSS rotate animation through visual examples.
Demonstration 1:
In this example, we will rotate the HTML element in order to specify the @keyframes, which are used for adding animation effects. The rotation of the div element will be achieved by applying the animation and transform property.
Code:
<html lang="en">
<head>
<title>Demonstration-1 of CSS Rotation Animation</title>
<style>
.element {
margin: 25px;
background-color:#8e4d4d;
animation: rotate 1s infinite;
height: 100px;
width: 100px;
}
@keyframes rotate {
0% {
transform: rotate(-60deg)
}
100% {
transform: rotate(60deg)
}
}
</style>
</head>
<body>
<h1>Demonstration of rotating div element</h1>
<div class="element">
</div>
</body>
</html>
Output:
Here, in the displayed result, we can observe the div element. You may write the code on your computer to visualize the real-time rotation of a div element.
Demonstration 2:
We will showcase the rotating circle in this illustration.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demonstration-2 of rotate animation</title>
<style>
body {
text-align: center;
}
.ring {
position: relative;
height: 45px;
margin: 0 auto;
width: 45px;
border: 4px solid #db4b89;
border-radius: 100%;
}
.ball1 {
position: absolute;
height: 45px;
width: 12px;
top: 0;
left: 17px;
animation: loading 1.5s linear infinite;
}
.ball2 {
position: absolute;
height: 16px;
width: 16px;
top: -11px;
left: 0;
border-radius: 100%;
background: #b3427e;
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h1>Demonstration of rotating a ring</h1>
<div class="ring">
<div class="ball1">
<div class="ball2"></div>
</div>
</div>
</body>
</html>
Output:
We can observe the ring displayed in the output provided below, allowing you to code on your device and experience the real-time rotation of a ring.
Demonstration 3:
We will generate the pair of spinning spheres in this diagram.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demonstration-3 of rotate animation</title>
<style>
body {
text-align: center;
}
.balls {
display: flex;
height: 126px;
justify-content: center;
align-items: center;
}
.ball-rotation {
width: 45px;
height: 45px;
position: relative;
animation: loading 2s linear infinite;
}
.ball-1,.ball-2 {
position: absolute;
width: 20px;
height: 20px;
top: 0;
border-radius: 100%;
background-color: #c029d7;
}
.ball-2 {
top: auto;
bottom: -50px;
background-color: rgb(242, 252, 58);
}
@keyframes loading {
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h1>Illustrating the two balls rotating</h1>
<div class="balls">
<div class="ball-rotation">
<div class="ball-1"></div>
<div class="ball-2"></div>
</div>
</div>
</body>
</html>
Output:
Here, in the outcome below, we can observe the pair of spheres. You have the ability to write the code on your machine to view the live rotation of the two balls.
Demonstration 4:
We will construct the rotated image as depicted in this diagram. The <image> tag will be employed to insert the image onto the webpage and rotate it in a clockwise manner using the rotate function.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demonstration-4 of CSS Rotation Animation</title>
<style>
body {
padding: 20px;
}
.element-1 {
text-align: center;
width: 240px;
height: 240px;
animation: rotate-element-1 infinite 5s linear;
}
@keyframes rotate-element-1{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<h1>Demonstration of CSS Image Rotation Animation</h1>
<h3>Rotating image in clockwise direction</h3>
<div class="element-1">
<br> <br> <br>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Rotated Image" height="100px" width="100px">
</div>
</body>
</html>
Output:
We can easily observe the displayed image in the downward output. You can write the code on your device to view the real-time rotation of an image.
Demonstration 5:
We will generate the image rotation counterclockwise by utilizing the rotate function.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demonstration-5 of CSS Rotation Animation</title>
<style>
body {
padding: 20px;
}
.element-1 {
text-align: center;
width: 240px;
height: 240px;
animation: rotate-element-1 infinite 5s linear;
}
@keyframes rotate-element-1{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<h1>Demonstration of CSS Image Rotation Animation</h1>
<h3>Rotating image in anti-clockwise direction</h3>
<div class="element-1">
<br> <br> <br>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Rotated Image" height="100px" width="100px">
</div>
</body>
</html>
Output:
We can observe the image displayed in the following output, and you can execute the code on your device to view the real-time rotation of the image.
Demonstration 6:
We will pivot the rectangle in this illustration.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demonstration-6 of CSS Rotation Animation</title>
<style>
body {
padding: 20px;
}
.rectangle {
margin: 25px;
animation: rotate 2s infinite;
height: 100px;
width: 100px;
}
@keyframes rotate {
0% {
transform: rotate(-120deg)
}
100% {
transform: rotate(120deg)
}
}
</style>
</head>
<body>
<h3>Demonstration of rotating a rectangle</h3>
<div class="rectangle">
<br> <br>
<svg width="300" height="500">
<rect width="150" height="50" style="fill:rgb(241, 152, 161); stroke-width: 2; stroke: rgb(244, 67, 120)"/>
</svg>
</div>
</body>
</html>
Output:
We can observe a rectangle displayed in the output presented below. You have the option to write the code on your device to witness the real-time rotation of a rectangle.
Conclusion
This guide has educated us on CSS rotate animation. We can make use of CSS's "animation" and "transform" attributes to rotate the HTML element.