CSS Rotate Animation

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" is a CSS property that takes value as rotate(degree), and the "animation" is a CSS property that takes value as rotate, time, and duration.

Demonstrations of CSS Rotate Animation

Let us comprehend the CSS rotate animation with the help of demonstrations.

Demonstration 1:

In this demonstration, we will rotate the HTML element so we can define the @keyframes, which is utilized for providing animation. We will utilize the animation and transform property to rotate the div element.

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 output below, we can witness the div element. You can write the code on your device to see the live rotation of a div element.

Demonstration 2:

We will demonstrate the rotating ring in this demonstration.

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 witness the ring in the output below, and you can write the code on your device to see the live rotation of a ring.

Demonstration 3:

We will create the two rotating balls in this illustration.

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 result downwards, we can witness the two balls. You can compose the code on your device to see the two balls rotating live.

Demonstration 4:

We are going to build the rotated image in this illustration. We will utilize the <image> tag to add the image on the web page and rotate the image in a clockwise direction with the assistance of 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="flower.jpg" alt="Rotated Image" height="100px" width="100px">
    </div>
</body>
</html>

Output:

We can clearly witness the image in the output provided downwards. You can compose the code on your device to see the live rotation of an image.

Demonstration 5:

We will construct the image rotating in an anti-clockwise direction with the assistance of 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="flower.jpg" alt="Rotated Image" height="100px" width="100px">
    </div>
</body>
</html>

Output:

We can witness the image in the output below and you can write the code in your device to see the live rotation of an image.

Demonstration 6:

We will rotate the rectangle in this demonstration.

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 witness the rectangle in the output below. You can compose the code on your device to see the live rotation of a rectangle.

Conclusion

This article has taught us about CSS rotate animation. We can utilize CSS's "animation" and "transform" properties to rotate the HTML element.

Next TopicCSS Rotate Text

← prev next →