Comment faire pivoter le texte verticalement à l'aide de CSS sur différents navigateurs ?

Rotation verticale du texte avec CSS

La réalisation d'une rotation verticale du texte entre navigateurs nécessite des solutions spécifiques au navigateur. Pour les navigateurs prenant en charge les transformations CSS3, rotate() peut être utilisé.

Transformation CSS3 :

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

Ce code fait pivoter le texte de 90 degrés dans le sens inverse des aiguilles d'une montre et ancre la rotation. au centre du texte.

Filtrer pour IE :

Pour les versions IE 5.5 et ultérieures, la propriété filter peut être utilisée :

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

La valeur rotation=3 fait pivoter le texte de 270 degrés dans le sens inverse des aiguilles d'une montre.

moz-transform pour Firefox :

Pour Firefox 3.5 et plus tard, -moz-transform est utilisé :

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

-webkit-transform pour Safari/Webkit :

Pour les navigateurs Safari et Webkit, -webkit-transform est utilisé :

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

Navigateur Prise en charge :

Ces solutions offrent une prise en charge multi-navigateurs pour la rotation verticale du texte dans IE6, Firefox 2, Chrome, Safari et Opera.

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!