Comment faire pivoter du texte en CSS sans compromettre l'alignement ?

Comment faire pivoter le texte en CSS pour obtenir des rotations alignées

La rotation du texte en CSS ajoute un élément dynamique aux conceptions Web, mais peut parfois conduire aux problèmes d’alignement. Voici comment relever ces défis et réaliser les rotations souhaitées :

Dans votre HTML, configurez le texte dans les éléments imbriqués, comme dans le code HTML fourni.

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

Le CSS ci-dessus fait pivoter le Élément de classe ".title" à 90 degrés dans le sens inverse des aiguilles d'une montre en utilisant la propriété "transform: rotate(-90deg)".

Cependant, la rotation entraîne la rupture de l'alignement du texte. Pour résoudre ce problème, le "writing-mode: vertical-rl;" La propriété peut être ajoutée directement après la propriété "transform".

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

Cette propriété modifie l'orientation du texte en verticale, garantissant ainsi un alignement correct après la rotation.

Alternativement, si vous souhaitez que le texte soit restent horizontaux, vous pouvez utiliser la propriété "letter-spacing" pour ajuster l'espacement entre les caractères. Par exemple, le définir sur une valeur élevée peut créer l'illusion de rotation tout en conservant l'alignement horizontal :

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

En prenant en compte ces considérations et en utilisant les propriétés CSS appropriées, vous pouvez efficacement faire pivoter le texte en CSS sans compromettre l'alignement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!