How to Rotate Text with CSS

Introduction

Rotating text in CSS can add a dynamic and creative effect to your design. Using the transform property, you can easily rotate text to any degree, making it a useful tool for vertical headers, banners, or special design elements.

In this tutorial, you'll learn how to rotate text using the transform property in CSS.

Problem Statement

Create a CSS code that:

Rotates text using the transform property.
Demonstrates how to apply different degrees of rotation (e.g., 45°, 90°, 180°).

Example:

Input: A paragraph element with the text "Rotated Text Example".
Output: The text is rotated based on the degree specified.

Solution Steps

Use transform: rotate(): Apply the rotate() function within the transform property to rotate the text by a specified degree.
Apply Rotation to Different Elements: Use the transform property on various elements like p, h1, or span for rotating text.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotate Text Example</title>
    <style>
        /* Step 1: Rotate text by 45 degrees */
        .rotate-45 {
            transform: rotate(45deg);
        }

        /* Step 2: Rotate text by 90 degrees */
        .rotate-90 {
            transform: rotate(90deg);
        }

        /* Step 3: Rotate text by 180 degrees */
        .rotate-180 {
            transform: rotate(180deg);
        }
        
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            overflow: hidden; /* Ensure no overflow */
        }
    </style>
</head>
<body>

    <p class="rotate-45">This text is rotated by 45 degrees.</p>
    <p class="rotate-90">This text is rotated by 90 degrees.</p>
    <p class="rotate-180">This text is rotated by 180 degrees.</p>

</body>
</html>

Explanation

Step 1: Use `transform: rotate(45deg)`

To rotate text by 45 degrees, use the following CSS:
```
.rotate-45 {
    transform: rotate(45deg);
}
```

Step 2: Use `transform: rotate(90deg)`

To rotate text by 90 degrees, use this CSS:

.rotate-90 {
    transform: rotate(90deg);
}

Step 3: Use `transform: rotate(180deg)`

To rotate text by 180 degrees, apply the following CSS:
```
.rotate-180 {
    transform: rotate(180deg);
}
```

Output

Conclusion

Rotating text in CSS is easy using the transform: rotate() property. By specifying the degree of rotation, you can create unique design elements and make your content visually engaging.

Java Guides

Search This Blog