web-dev-qa-db-fra.com

Comment faire pivoter un code HTML <div> à 90 degrés?

J'ai un <div> que je veux faire pivoter de 90 degrés:

<div id="container_2"></div>

Comment puis-je faire ceci?

htmlcss
202
user1808433

Vous avez besoin de CSS pour y parvenir, par exemple:

#container_2 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

Démo: 

#container_2 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
<div id="container_2"></div>

(Il y a une rotation de 45 degrés dans la démo pour que vous puissiez voir l'effet)

Remarque: Les préfixes -o- et -moz- sont ne sont plus pertinents et probablement pas nécessaires . IE9 nécessite -ms- et Safari et le navigateur Android nécessitent -webkit-

Mise à jour 2018: Les préfixes de fournisseur ne sont plus nécessaires. Seule transform suffit. (merci @rinogo)

381
tborychowski

Utilisez ce qui suit dans votre CSS 

div {
    -webkit-transform: rotate(90deg); /* Safari and Chrome */
    -moz-transform: rotate(90deg);   /* Firefox */
    -ms-transform: rotate(90deg);   /* IE 9 */
    -o-transform: rotate(90deg);   /* Opera */
    transform: rotate(90deg);
}
23
عثمان غني

Utilisez transform: rotate(90deg):

#container_2 {
    border: 1px solid;
    padding: .5em;
    width: 5em;
    height: 5em;
    transition: .3s all;  /* rotate gradually instead of instantly */
}

#container_2:hover {
    -webkit-transform: rotate(90deg);  /* to support Safari and Android browser */
    -ms-transform: rotate(90deg);      /* to support IE 9 */
    transform: rotate(90deg);
}
<div id="container_2">This box should be rotated 90&deg; on hover.</div>

Cliquez sur "Exécuter l'extrait de code", puis passez la souris sur la boîte pour voir l'effet de la transformation.

De manière réaliste, aucune autre entrée préfixée n'est nécessaire. Voir Puis-je utiliser les transformations CSS3?

10
Zaz

vous pouvez utiliser la propriété css3 write-mode mode d'écriture: tb-rl

astuces css

mozilla

3
Ashraf

Nous pouvons ajouter ce qui suit à une balise particulière en CSS:

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);

En cas de demi-rotation, changez 90 en 45.

0
subindas pm