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

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%;
}

2. 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!