Maison >interface Web >tutoriel CSS >Comment puis-je faire pivoter verticalement du texte avec une compatibilité entre navigateurs ?

Comment puis-je faire pivoter verticalement du texte avec une compatibilité entre navigateurs ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-09 22:44:11983parcourir

How Can I Vertically Rotate Text with Cross-Browser Compatibility?

Rotation du texte verticalement avec prise en charge de plusieurs navigateurs

Besoin d'afficher un seul mot verticalement ? Ceci peut être réalisé avec CSS, garantissant la compatibilité avec les principaux navigateurs tels que IE6, Firefox 2 et Chrome.

Solution :

Pour faire pivoter le texte de 90 degrés à l'aide de CSS, suivez ces étapes :

  1. Définissez une classe avec le CSS souhaité transformations :
.rotate {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);

  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
}
  1. Appliquer la classe au texte souhaité :
<span>

Pour les navigateurs plus anciens :

Dans les anciens navigateurs, vous pouvez utiliser le code suivant pour la transformation matricielle :

.rot-neg-90 {
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;
}

Ceci fera pivoter le texte de -90 degrés dans Firefox 3.5 et Safari/WebKit 3.1. IE a un support matriciel limité, mais il est plus complexe à mettre en œuvre.

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!

Déclaration:
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