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

Réponses:

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

(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
la 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);
}
عثمان غني
la 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
la 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
la 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
la source