Maison >interface Web >tutoriel CSS >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 :
.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%; }
<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!