配置を損なうことなくCSSでテキストを回転するにはどうすればよいですか?

CSS でテキストを回転して回転を揃える方法

CSS でテキストを回転すると、Web デザインに動的な要素が追加されますが、場合によってはアライメントの問題に。これらの課題に対処し、望ましい回転を実現する方法は次のとおりです。

HTML では、提供された HTML コードのように、ネストされた要素内にテキストを設定します。

<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>

上記の CSS は、 「transform:rotate(-90deg)」プロパティを使用して「.title」クラス要素を反時計回りに 90 度回転します。

ただし、回転によりテキストの配置が崩れます。これを解決するには、「writing-mode:vertical-rl;」プロパティは、「transform」プロパティの直後に追加できます。

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

このプロパティは、テキストの方向を垂直に変更し、回転後の適切な配置を確保します。

または、テキストを水平のままの場合は、「letter-spacing」プロパティを使用して文字間の間隔を調整できます。たとえば、大きな値に設定すると、水平方向の配置を維持しながら回転しているように見せることができます。

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

これらの考慮事項を考慮し、適切な CSS プロパティを使用することで、CSS 内のテキストを効果的に回転させることができます。アライメントが損なわれます。

以上が配置を損なうことなくCSSでテキストを回転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。