How to Create a Rotating Text Effect with HTML and CSS

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog