Come posso ruotare un HTML <div> di 90 gradi?

245

Ho un <div>che voglio ruotare di 90 gradi:

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

Come posso fare questo?

html css

— user1808433
fonte

6

Cosa può fare Google per te :): stackoverflow.com/questions/2449668/…

— Benz

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

— specialscope

465

È necessario CSS per raggiungere questo obiettivo, ad esempio:

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

demo:

Mostra snippet di codice

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

Espandi frammento

(C'è una rotazione di 45 gradi nella demo, quindi puoi vedere l'effetto)

Nota: i prefissi -o-e non-moz- sono più pertinenti e probabilmente non richiesti . IE9 richiede -ms-e Safari e il browser Android richiedono-webkit-

Aggiornamento 2018: i prefissi del fornitore non sono più necessari. È transformsufficiente. (grazie @rinogo)

— Dziad Borowy
fonte

non sta cambiando lo sto usando nel file css

— user1808433

9

@ user1808433 perché con una rotazione di 90 gradi il quadrato sembrerebbe lo stesso :-), ecco una demo: jsbin.com/opamiq/1

— Dziad Borowy

7

inoltre, assicurati che sia un blocco

— chovy

3

2018 aggiornamento: Solo transform: rotate(90deg);è necessaria

— rinogo

28

Usa quanto segue nel tuo 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);
}

— عثمان غني
fonte

38

Proprio come un suggerimento per tutti i futuri lettori: posizionare sempre le regole prefissate prima della definizione degli standard. In questo caso, tutte le regole con prefisso del browser devono essere prima della transform: rotate(90deg);regola. Il motivo potrebbe essere che in genere si desidera che gli standard abbiano la precedenza e nel CSS l'ultima definizione vince sempre.

— Jesse,

14

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

Espandi frammento

Fai clic su "Esegui snippet di codice", quindi passa il mouse sopra la casella per vedere l'effetto della trasformazione.

Realisticamente, non sono necessarie altre voci con prefisso. Vedi Posso usare le trasformazioni CSS3?

— Zaz
fonte

1

Sarebbe meglio come un commento in una risposta esistente ... o apportare una modifica a una risposta esistente affermando che probabilmente gli altri prefissi non sono necessari. Avere 3 praticamente esattamente le stesse risposte non è utile.

— misterManSam,

@Zaz come mantenere la scatola ruotata anche dopo il passaggio del mouse?

— heyayush,

@ayushsharma: usa JS o vedi Rendi lo stato di passaggio del mouse CSS dopo il "non spostamento" : un hack ha suggerito che esiste #element{transition: 9999999s}(il che rende la transizione alla normalità richiede per sempre) e #element:hover{transition: .3s}(o per quanto tempo desideri che la rotazione richieda).

— Zaz,

4

è possibile utilizzare la modalità di scrittura della proprietà css3 scrittura scrittura: tb-rl

CSS-trucchi

mozilla

— Ashraf
fonte

0

Possiamo aggiungere quanto segue a un tag particolare nei CSS:

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

In caso di mezza rotazione passare 90a 45.

— subindas pm
fonte