In this blog post, we’re going to learn how to rotate text in CSS using the transform property. Rotating text can be a useful technique for creating unique designs or just adding a touch of creativity to your website.

The transform property

The transform property in CSS is used to apply various transformations to an element, such as rotation, scaling, skewing, and translating. In this tutorial, we will focus only on rotation.

To rotate an element, we can use the rotate() function with the transform property like this:

    transform: rotate(45deg);
    

The above code will rotate an element by 45 degrees clockwise. You can change the angle value as per your requirement.

Rotating text example

Let’s see an example of how to rotate a simple text element using the transform property.

Create an HTML file and add the following code:

    
    
    
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Rotate Text Example</title>
        <style>
            .rotate-text {
                display: inline-block;
                transform: rotate(45deg);
            }
        </style>
    
    
        <h1 class="rotate-text">Rotated Heading</h1>
    
    
    

In the example above, we have created an h1 element with the class rotate-text. Inside the style tag, we define the .rotate-text class and apply the transform: rotate(45deg) property to it. This will rotate the heading text by 45 degrees clockwise.

You can also rotate the text by a negative angle to make it rotate counterclockwise. For example:

    transform: rotate(-45deg);
    

That’s it! Now you know how to rotate text in CSS using the transform property. Experiment with different angle values and elements to create unique designs for your website.