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

245

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

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

Comment puis-je faire ceci?

html css

— user1808433
source

6

Ce que Google peut faire pour vous :): stackoverflow.com/questions/2449668/…

— Benz

Un exemple: w3schools.com/cssref/css3_pr_transform.asp

— specialscope

465

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:

Afficher l'extrait de code

#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>

Développer l'extrait

(Il y a une rotation de 45 degrés dans la démo, donc vous pouvez voir l'effet)

Remarque: Les préfixes -o-et ne-moz- 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. Seul transformest suffisant. (merci @rinogo)

— Dziad Borowy
source

il ne change pas

— j'utilise

9

@ user1808433 car avec une rotation de 90 degrés, le carré aurait la même apparence :-), voici une démo: jsbin.com/opamiq/1

— Dziad Borowy

7

aussi, assurez-vous que c'est un bloc

— chovy

3

Mise à jour 2018: Seul transform: rotate(90deg);est nécessaire

— rinogo

28

Utilisez le suivant 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);
}

— عثمان غني
source

38

Comme suggestion à tous les futurs lecteurs: placez toujours les règles préfixées avant la définition des normes. Dans ce cas, toutes les règles préfixées par le navigateur doivent précéder la transform: rotate(90deg);règle. La raison en est que, généralement, vous voulez que les normes soient prioritaires, et en CSS, la dernière définition l'emporte toujours.

— Jesse

14

Utilisation 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>

Développer l'extrait

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

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

— Zaz
source

1

Ce serait mieux comme un commentaire sous une réponse existante ... ou apporter une modification à une réponse existante indiquant que les autres préfixes ne sont probablement pas nécessaires. Avoir 3 à peu près exactement les mêmes réponses est inutile.

— misterManSam

@Zaz comment garder la boîte en rotation même après avoir découvert?

— heyayush

@ayushsharma: Utilisez JS ou voyez Faire en sorte que l'état CSS Hover reste après "unhovering" : Un hack a suggéré qu'il y en a un #element{transition: 9999999s}(ce qui fait que la transition vers la normale prend une éternité) et #element:hover{transition: .3s}(ou aussi longtemps que vous voulez que la rotation prenne).

— Zaz

4

vous pouvez utiliser la propriété css3 en mode écriture mode écriture: tb-rl

astuces css

mozilla

— Ashraf
source

0

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, passez 90à 45.

— subindas pm
source