CSS Rotate Text: Comment changer l'orientation du texte

CSS est le langage utilisé pour styliser les pages Web, et vous pouvez en faire beaucoup, y compris des effets de texte avancés. « CSS faire pivoter le texte » peut être quelque chose que vous recherchez souvent lorsque vous faites du développement Web. Heureusement, il existe plusieurs façons d’utiliser CSS pour faire pivoter votre texte. Celui que vous utilisez dépend du type d’effets que vous souhaitez obtenir.

Texte de rotation CSS : utilisation du mode écriture

Vous pouvez utiliser la propriété CSS writing-mode pour définir si les lignes de texte d’un élément sont disposées horizontalement ou verticalement. Voici la syntaxe de cette propriété CSS :

mode d’écriture : horizontal-tb | vertical-rl | vertical-lr | sur le côté-rl | de côté-lr ;

Voici ce que signifie chacune de ces valeurs :

horizontal-tb: Le texte s’écoulera horizontalement et du haut vers le bas de la page, comme nous en avons l’habitude en anglais. C’est le mode par défaut.
vertical-rl: Chaque ligne de texte s’écoulera verticalement vers le bas de la page et les lignes iront de droite à gauche. Ce mode d’écriture est utilisé pour les langues chinoise, japonaise et coréenne.
vertical-lr: Chaque ligne de texte s’écoulera verticalement vers le bas de la page et les lignes commenceront à gauche et iront vers la droite. Ce mode d’écriture fonctionne pour la langue mongole.
sur le côté-rl: Il s’agit d’un mode personnalisé qui tourne le texte sur le côté.
de côté-lr: Il s’agit d’un mode personnalisé qui tourne le texte sur le côté.

Voici un exemple d’utilisation du mode écriture pour faire pivoter du texte. Voici le CSS :

.horizontal-tb {
mode d’écriture : horizontal-tb ;
marge-bas : 1em ;
}

.vertical-rl {
mode d’écriture : vertical-rl ;
}

.vertical-lr {
mode d’écriture : vertical-lr ;
}

.sideways-rl {
mode d’écriture : sideways-rl ;
}

.sideways-lr {
mode d’écriture : sideways-lr ;
}

Voici le HTML :

mode d’écriture

horizontal-tb

mode d’écriture

vertical-rl

mode d’écriture

vertical-lr

mode d’écriture

sideways-rl

mode d’écriture

de côté-lr

Et voici le résultat:

exemple de rotation de texte CSS : utilisation du mode écriture

Vous pouvez également voir le code en action sur ce JSFiddle.

Texte de rotation CSS : utilisation de l’orientation du texte

La propriété CSS text-orientation définit l’orientation des caractères dans une ligne de texte. Cela n’affecte ces caractères que lorsque la propriété writing-mode est définie sur l’un des modes verticaux. Il ne fait rien au texte lorsque le mode d’écriture est défini sur horizontal-tb. Voici la syntaxe de cette propriété CSS :

orientation texte : mixte | debout | de côté | latéralement à droite ;

Voici ce que ces valeurs feront au texte :

mixte: Ceci est la valeur par défault. Les caractères horizontaux sont pivotés de 90 degrés dans le sens des aiguilles d’une montre. Les caractères verticaux sont affichés dans leur orientation naturelle.
droit: Cette valeur dispose les caractères horizontaux naturellement et force la direction du texte à être de gauche à droite.
de côté: Le texte en mode d’écriture verticale est affiché latéralement, comme s’il était en disposition horizontale, mais la ligne est tournée de 90 degrés dans le sens des aiguilles d’une montre.
de côté à droite: Cette valeur est conservée pour la prise en charge du navigateur et la rétrocompatibilité et est un alias pour sideways.

Pour comprendre ce que certaines de ces valeurs font, il est préférable de voir un exemple. Voici quelques CSS utilisant la propriété CSS text-orientation :

.mixte {
mode d’écriture : vertical-rl ;
orientation texte : mixte ;
}

.debout {
mode d’écriture : vertical-rl ;
orientation du texte : droit ;
}

.de côté {
mode d’écriture : vertical-rl ;
orientation du texte : de côté ;
}

.sideways-right {
mode d’écriture : vertical-rl ;
orientation du texte : de côté à droite ;
}

Voici le code HTML auquel le CSS ci-dessus sera appliqué :

orientation du texte

mixte

orientation du texte

debout

orientation du texte

sur le côté

orientation du texte

côté droit

Et voici le résultat:

Pour voir ce code en action, vous pouvez visiter ce JSFiddle.

Texte de rotation CSS : utilisation de la transformation

Les deux propriétés CSS que nous avons déjà explorées feront pivoter votre texte, mais vous n’avez pas beaucoup d’options. Après tout, ils sont principalement utilisés pour aligner le texte sur la page de la manière dont les différentes langues sont écrites. Si vous souhaitez plus de flexibilité lors de la rotation du texte, utilisez la propriété CSS text-transform . Vous pouvez utiliser cette propriété pour appliquer une transformation 2D ou 3D à un élément.

La propriété CSS transform est souvent utilisée avec ces valeurs statiques pour transformer le texte de différentes manières :

capitaliser: Met la première lettre de chaque mot en majuscule.
majuscule: Transforme tous les caractères en majuscules.
minuscule: Transforme tous les caractères en minuscules.

Cependant, vous pouvez faire beaucoup plus avec la propriété transform lorsque vous l’utilisez en conjonction avec diverses fonctions CSS comme celles-ci :

tourner(angle) : fait pivoter le texte comme défini par le paramètre d’angle.
tourner3d(x, y, z, angle) : fait pivoter le texte en 3D.
rotationX(angle) : Fait pivoter le texte le long de la X axe tel que défini par le paramètre d’angle.
rotationY(angle) : Fait pivoter le texte le long de la Oui axe tel que défini par le paramètre d’angle.
fausser(angle x, angle y) : incline le texte tel que défini par le X et y paramètres angulaires.
obliqueX(angle) : incline le texte le long du X axe tel que défini par le paramètre d’angle.
obliqueY(angle) : incline le texte le long du Oui axe tel que défini par le paramètre d’angle.

Il existe un certain nombre de ces fonctions CSS que vous pouvez utiliser pour appliquer des transformations personnalisées au texte d’une page Web, mais pour faire pivoter du texte, vous devriez en trouver une dans cette liste qui fera le travail.

Voici un exemple de feuille de style CSS utilisant ces fonctions CSS avec la propriété de transformation CSS :

.rotation {
transformer : faire pivoter (45 degrés) ;
}

.rotate3d {
transformer : rotate3d(1, 1, 1, 45deg);
}

.rotateX {
transformation : rotationX (60 degrés) ;
}

.rotateY {
transformer : rotationY (60 degrés) ;
}

.obliger {
transformation : biais (20 degrés, 20 degrés) ;
}

.skewX {
transformation : skewX(20deg) ;
}

.skewY {
transformer : skewY(20deg) ;
}

Et voici le code HTML auquel il est appliqué :

transformer avec

faire pivoter (45 degrés)

transformer avec

rotation3d(1, 1, 1, 45deg)

transformer avec

rotationX(60deg)

transformer avec

rotationY(60deg)

transformer avec

inclinaison (20 degrés, 20 degrés)

transformer avec

obliqueX(20deg)

transformer avec

skewY(20deg)

Voici le résultat lorsque ce code est exécuté dans un navigateur :

Vous pouvez également trouver cet exemple exécuté en direct sur ce JSFiddle.

Texte de rotation CSS : utilisation de l’animation

Les exemples que nous avons vus jusqu’à présent font un type de texte rotatif, mais si ce que vous entendez par « rotation » est « faire pivoter une liste de valeurs dans un élément », alors aucun de ces exemples ne correspondra à ce que vous recherchez. Vous devrez utiliser l’animation. Vous pensez peut-être que vous devez utiliser JavaScript pour cela, mais ce n’est pas le cas. Vous pouvez réellement le faire avec juste CSS. Vous n’avez pas besoin d’apprendre un nouveau langage de programmation pour obtenir cet effet et ces types d’animations CSS fonctionneront plus facilement que les animations JavaScript car elles utilisent la fonctionnalité intégrée du navigateur pour les contrôler.

Les animations CSS vous permettent d’animer des transitions d’un style CSS à un autre. Pour utiliser les animations CSS, vous devez utiliser deux composants : un style qui décrit l’animation que vous utiliserez et un ensemble d’images clés qui déterminent les états de début et de fin des styles d’animation, ainsi que les états intermédiaires.

La meilleure façon de voir cela dans le travail est à travers un exemple. Supposons que nous ayons une bannière de site Web que nous voulions faire pivoter selon les valeurs suivantes :

L’un de mes navigateurs préférés est Chrome.
Un de mes navigateurs préférés est Firefox.
L’un de mes navigateurs préférés est Safari.
Un de mes navigateurs préférés est Opera.
L’un de mes navigateurs préférés est Edge.
Un de mes navigateurs préférés est IE.

Nous n’avons vraiment qu’à faire pivoter la dernière valeur. Pour commencer, créez une page HTML comme celle-ci :

L’un de mes navigateurs préférés est

Chrome.
Firefox.
Safari.
Opéra.
Bord.
IE.

Si vous affichez ce code dans un navigateur sans CSS, voici à quoi il ressemble :

rendre ce code dans un navigateur sans CSS

Voici le code CSS pour faire tourner le nom du navigateur :

.phrase {
couleur : #222 ;
taille de police : 30 px ;
aligner le texte : à gauche ;
}

.sentence span {
Couleur bleue;
}

.rotation {
affichage : en ligne ;
retrait de texte : 10 px ;
}

.rotate span {
position : absolue ;
opacité : 0 ;
débordement caché;
largeur : 100 % ;
Couleur bleue;
}

.rotate span {
animation : rotateWords 18s linéaire infini 0s ;
}

.rotate span:nth-child(2) {
délai d’animation : 3 s ;
}

.rotate span:nth-child(3) {
délai d’animation : 6 s ;
}

.rotate span:nth-child(4) {
délai d’animation : 9 s ;
}

.rotate span:nth-child(5) {
délai d’animation : 12 s ;
}

.rotate span:nth-child(6) {
délai d’animation : 15 s ;
}

@keyframes rotateWords {
0 % { opacité : 1 ; animation-timing-function : facilité ; hauteur : 0px ; }
8 % { opacité : 1 ; hauteur : 60px ; }
19 % { opacité : 1 ; hauteur : 60px ; }
25 % { opacité : 0 ; hauteur : 60px ; }
100 % { opacité : 0 ; }
}

Par défaut, tous les mots de la liste du navigateur sont masqués. Mais nous ciblons chaque mot avec la fonction d’animation « rotateWords », qui atténue chaque mot puis le fait disparaître. Cette boucle s’exécute pendant 18 secondes et chaque mot de la liste reçoit un délai d’animation qui se compense lorsque son animation démarre afin que le nom du navigateur actuel s’affiche au fur et à mesure que le suivant disparaît. Bien qu’une image statique ne lui rende pas justice, voici à quoi elle ressemble maintenant au milieu d’une rotation :

Il existe en fait une grande variété d’effets que vous pouvez utiliser pour faire pivoter du texte à l’aide d’une animation CSS. Ce n’est qu’une option. Jouez avec les valeurs et les fonctions pour voir quel type d’effets vous pouvez créer. Vous pouvez expérimenter en copiant ce JSFiddle où le code s’exécute en direct. Avec CSS, vous pouvez faire de nombreux effets avancés dans le navigateur sans écrire de code JavaScript. Pour en savoir plus sur CSS, consultez notre article sur CSS onclick, découvrez la différence entre flexbox et grid dans CSS, ou découvrez en quoi SCSS diffère de CSS. Pour devenir un expert CSS, ne cherchez pas plus loin que nos cours CSS. Que vous soyez débutant ou que vous cherchiez à améliorer vos compétences en CSS, nous avons un cours pour vous.