Wie kann man Text in CSS drehen, ohne die Ausrichtung zu beeinträchtigen?

So drehen Sie Text in CSS, um ausgerichtete Drehungen zu erhalten

Das Drehen von Text in CSS fügt Webdesigns ein dynamisches Element hinzu, kann aber manchmal zu Problemen führen zu Ausrichtungsproblemen. So bewältigen Sie diese Herausforderungen und erreichen die gewünschten Rotationen:

Richten Sie in Ihrem HTML den Text in verschachtelten Elementen ein, wie im bereitgestellten 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>

Das obige CSS dreht den „.title“-Klassenelement um 90 Grad gegen den Uhrzeigersinn mithilfe der Eigenschaft „transform: rotation(-90deg)“.

Die Drehung führt jedoch dazu, dass die Textausrichtung unterbrochen wird. Um dieses Problem zu beheben, muss der „Writing-Mode: Vertical-rl;“ Die Eigenschaft kann direkt nach der Eigenschaft „transformieren“ hinzugefügt werden.

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

Diese Eigenschaft ändert die Textausrichtung in vertikal und sorgt so für die richtige Ausrichtung nach der Drehung.

Alternativ, wenn Sie möchten, dass der Text so ausgerichtet wird Bleiben die Zeichen horizontal, können Sie mit der Eigenschaft „letter-spacing“ den Abstand zwischen den Zeichen anpassen. Wenn Sie ihn beispielsweise auf einen großen Wert festlegen, kann die Illusion einer Drehung erzeugt werden, während die horizontale Ausrichtung beibehalten wird:

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

Indem Sie diese Überlegungen berücksichtigen und die entsprechenden CSS-Eigenschaften verwenden, können Sie Text in CSS effektiv drehen, ohne dies zu tun die Ausrichtung beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWie kann man Text in CSS drehen, ohne die Ausrichtung zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!