How to Rotate Text in CSS Without Compromising Alignment?

How to Rotate Text in CSS to Get Aligned Rotations

Rotating text in CSS adds a dynamic element to web designs, but can sometimes lead to alignment issues. Here's how to address these challenges and achieve desired rotations:

In your HTML, set up the text within nested elements, as in the provided HTML code.

<code class="css">.mainWrapper{margin:0 auto; width:960px; background:#EFEFEF;}
.rotateObj{position:relative; height:400px;}
.rotateObj .title{
    float:left;
    background:gray;
    width:50px;
    height:100%;
    
    /** Rounded Border */ 
    border-radius:5px;-moz-border-radius:5px;
    
    /** Rotation */
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);    
    transform:rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotateObj .active{background:green;}
.rotateObj .content{float:left;width:600px;height:100%;padding:20px;}
.hide{display:none;}</code>

The CSS above rotates the ".title" class element 90 degrees counterclockwise using the "transform: rotate(-90deg)" property.

However, the rotation causes the text alignment to break. To resolve this, the "writing-mode: vertical-rl;" property can be added directly after the "transform" property.

<code class="css">writing-mode: vertical-rl;</code>

This property changes the text orientation to vertical, ensuring proper alignment after rotation.

Alternatively, if you want the text to remain horizontal, you can use the "letter-spacing" property to adjust the spacing between the characters. For example, setting it to a large value can create the illusion of rotation while maintaining horizontal alignment:

<code class="css">letter-spacing: 10px;</code>

By taking into account these considerations and using the appropriate CSS properties, you can effectively rotate text in CSS without compromising alignment.

The above is the detailed content of How to Rotate Text in CSS Without Compromising Alignment?. For more information, please follow other related articles on the PHP Chinese website!