Normalement, lorsque le texte est ajouté à une page Web en position horizontale sur l'écran d'affichage. Cependant, CSS fournit différentes façons de modifier la position du texte en fonction des préférences. Nous pouvons également modifier la direction et l'angle du texte en utilisant les propriétés CSS. Plus précisément, le texte peut être tourné à 90 degrés.

Ce manuel vous apprendra à faire tourner du texte à 90 degrés. Alors, commençons!

Comment faire tourner du texte à 90 degrés en CSS?

Pour faire tourner le texte à 90 degrés en CSS, le «transformer»La propriété est utilisée. Avant de l'utiliser, premièrement, nous discuterons de cette propriété CSS pour une meilleure compréhension.

Qu'est-ce que la propriété «Transformer» dans CSS?

Le "transformer»La propriété est utilisée pour la transformation 2D et 3D de tout élément. Cette propriété permet à un élément de tourner, de bouger, de biaiser et de faire évoluer. Vous pouvez également utiliser cette propriété pour faire tourner le texte ajouté à 90 degrés.

Syntaxe

Syntaxe du «transformer»La propriété est:

transformée: Aucune | Transform-fonctions

La description des valeurs ci-dessus est:

• aucun: Il est utilisé pour définir aucune transformation sur aucun élément.
• Transform-fonctions: Il peut être utilisé pour spécifier différentes fonctions, telles que Rotate (), Scale (), Move () et Skew ().

Passons à l'exemple pratique pour utiliser la propriété de transformation pour le texte rotatif en 90 degrés.

Exemple: texte rotatif 90 degrés en CSS

Dans le HTML, nous ajouterons un titre et un paragraphe en utilisant

et

Tag, respectivement:

Linuxhint

rotation du texte à 90 degrés

Cela montrera la sortie suivante:

Maintenant, nous allons passer au CSS et appliquer le «transformer»Propriété. Pour ce faire, utilisez "p«Pour accéder au paragraphe créé dans le fichier html. Après cela, utilisez la propriété de transformation et définissez l'angle de rotation comme «90deg”Dans la fonction rotate (). Ensuite, utilisez le «originaire«Propriété et définissez sa valeur sur»gauche”Pour faire pivoter le texte dans le sens des aiguilles d'une montre. De plus, nous avons réglé la marge-gauche "70px«Pour donner la marge du côté gauche du paragraphe, et pour le style, réglez le poids de police et la taille de la police comme«plus audacieux" et "gigantesque", respectivement:

p
transformée: rotation (90deg);
Transform-Origin: à gauche;
marge-gauche: 70px;
Police-poids: plus audacieux;
taille de police: X-plus;

Note: Ici le "originaire”La propriété est utilisée pour définir l'axe X et l'axe y de rotation.

Après l'implémentation du code ci-dessus, accédez au HTML et exécutez-le pour voir le résultat suivant:

On peut observer que l'utilisation du «transformer»Propriété, notre texte est tourné avec succès à 90 degrés.

Conclusion

Pour faire pivoter le texte à 90 degrés, le «transformer»La propriété est utilisée. L'angle de la rotation est défini en fonction de la valeur de degré spécifiée. En utilisant cela, vous pouvez également définir différents angles du texte en fonction de votre choix. Dans cet article, nous avons expliqué comment faire tourner du texte à 90 degrés en utilisant la propriété Transform à l'aide d'un exemple.