How To Rotate Text In CSS?

Last Updated : 17 Nov, 2024

The transform: rotate() and writing-mode property in CSS are used to rotate text to a specified angle. By setting an angle like rotate(45deg), you can control the orientation of text, adding visual interest or fitting unique layout needs.

1. Using transform Property

In this approach, we are using the transform property with the rotate function to rotate the text by 45 degrees. The display: inline-block makes sure the text behaves as a block element for transformation, while the margin provides spacing around it.

Syntax

transform: transform-function;

HTML

<h2>Using transform Property</h2>

<div style="display: inline-block;
			transform: rotate(45deg);
			padding: 20px;">
  	Rotated Text
</div>

Output

Using-Transform-Property — Using Transform Property

2. Using writing-mode Property

In this approach, we are using the writing-mode property to rotate text in various directions. By applying different writing-mode values like vertical-rl, vertical-lr, and sideways-lr, we control how text is displayed and oriented, allowing for horizontal, vertical, and sideways text layouts.

Syntax

writing-mode: value;

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        * {
            box-sizing: border-box;
            text-align: center;
        }

        .horizontal-tb {
            writing-mode: horizontal-tb;
        }

        .vertical-rl {
            writing-mode: vertical-rl;
        }

        .vertical-lr {
            writing-mode: vertical-lr;
        }

        .sideways-lr {
            writing-mode: sideways-lr;
        }

        .sideways-rl {
            writing-mode: sideways-rl;
        }

        .box {
            padding: 20px;
            margin: 20px;
            display: inline-block;
            vertical-align: middle;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <h2>Using writing-mode Property</h2>
  
    <div class="content-box">
        <div class="box horizontal-tb">
            Roatated Box 1
        </div>
        <div class="box vertical-rl">
            Roatated Box 2
        </div>
        <div class="box vertical-lr">
            Roatated Box 3
        </div>
        <div class="box sideways-lr">
            Roatated Box 4
        </div>
        <div class="box sideways-rl">
            Roatated Box 5
        </div>
    </div>
</body>

</html>