How to Create a Rotating Text Effect with HTML and CSS

Introduction

A rotating text effect can add dynamic and interactive visuals to your web page. This effect can be easily achieved using CSS @keyframes and the transform property with rotate().

In this tutorial, you'll learn how to create a rotating text effect using HTML and CSS.

Problem Statement

Create a CSS code that:

Animates text to rotate continuously using @keyframes and transform: rotate().
Demonstrates how to control the rotation speed and repetition.

Example:

Input: A heading element with the text "Rotating Text Effect".
Output: The text rotates continuously.

Solution Steps

Use @keyframes for Rotation Animation: Define keyframes to animate the text's rotation.
Apply the Rotation Effect to Text: Use the animation property to control the rotation duration and repetition.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating Text Animation</title>
    <style>
        /* Step 1: Define keyframes for rotating text */
        @keyframes rotateText {
            0% {
                transform: rotate(0deg); /* Start rotation at 0 degrees */
            }
            100% {
                transform: rotate(360deg); /* Full rotation (360 degrees) */
            }
        }

        /* Step 2: Apply rotation effect to text */
        .rotating-text {
            font-size: 3rem;
            color: #e74c3c;
            font-family: Arial, sans-serif;
            text-align: center;
            animation: rotateText 4s linear infinite; /* 4s rotation, infinite loop */
            margin-top: 100px;
        }

        /* Center the text */
        .container {
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1 class="rotating-text">Rotating Text Effect</h1>
    </div>

</body>
</html>

Output

Explanation

Step 1: Define `@keyframes` for Rotating Text

The @keyframes rule defines the rotation movement. It starts at 0deg and ends at 360deg to complete one full rotation:

@keyframes rotateText {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

Step 2: Apply the Rotation Effect to Text

To apply the rotation effect to the text, use the animation property:
```
.rotating-text {
    animation: rotateText 4s linear infinite;
}
```
The 4s specifies that the text will take 4 seconds to complete one full rotation, and infinite ensures that the rotation continues indefinitely.
The linear keyword ensures that the rotation happens at a constant speed throughout the animation.

Step 3: Center the Text

Use text-align: center to center the text within the page and add a margin for spacing:
```
.container {
    text-align: center;
}
```

Conclusion

Creating a rotating text effect with CSS is simple using @keyframes and the transform: rotate() property. This effect can add dynamic movement to your text, making it visually engaging and interactive on your web page.

Java Guides

Search This Blog