How to Create a Rotating Text Effect with HTML and CSS

Author:

🎓 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

  1. Use @keyframes for Rotation Animation: Define keyframes to animate the text's rotation.
  2. 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.

Comments

Post a Comment

Leave Comment

Spring Boot 3 Paid Course Published for Free
on my Java Guides YouTube Channel

Subscribe to my YouTube Channel (165K+ subscribers):
Java Guides Channel

Top 10 My Udemy Courses with Huge Discount:
Udemy Courses - Ramesh Fadatare