Maison > interface Web > tutoriel CSS > Comment faire pivoter du texte en CSS sans compromettre l'alignement ?

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

Mary-Kate Olsen
Libérer: 2024-11-03 10:10:29
original
1119 Les gens l'ont consulté

How to Rotate Text in CSS Without Compromising Alignment?

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal