Comment puis-je obtenir une rotation verticale du texte entre navigateurs avec CSS ?

Rotation verticale du texte entre navigateurs à l'aide de CSS

Arrière-plan

De nombreux sites Web modernes intègrent des contenu, y compris le texte pivoté. Cependant, obtenir un texte vertical cohérent dans tous les navigateurs présente un défi.

Solution

Pour faire pivoter un mot de 90 degrés, exploitez la propriété « transformer » :

.rotate {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;  
}

Compatibilité des navigateurs

Cette approche prend en charge les principaux navigateurs :

• Chrome (toute version)
• Firefox (≥2)
• Safari (≥3.1)
• Opera (≥5)
• IE (≥9)

Remarque

Les versions d'IE antérieures à 9 nécessitent l'application d'une propriété de filtre :

.rotate {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Pour Firefox (≥ 3.5) et Webkit (≥3.1), considérez '-moz-transform' et '-webkit-transform', respectivement.

Conclusion

Les techniques CSS fournies permettent une rotation verticale du texte entre navigateurs, permettant une présentation de contenu efficace et cohérente.

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!