Jak mogę obrócić HTML <div> o 90 stopni?

Odpowiedzi:

465

Aby to osiągnąć, potrzebujesz CSS, np .:

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

Próbny:

Pokaż fragment kodu

(W pokazie jest obrót o 45 stopni, dzięki czemu można zobaczyć efekt)

Uwaga:-o- i -moz-przedrostki są już istotne i zapewne nie jest wymagane . Wymagania IE9 -ms-oraz Safari i przeglądarka Android-webkit-

Aktualizacja 2018: Prefiksy dostawców nie są już potrzebne. Tylko transformjest wystarczająca. (dzięki @rinogo)

Dziad Borowy
źródło
to się nie zmienia, używam tego w pliku css
user1808433
9
@ user1808433, ponieważ przy obrocie o 90 stopni kwadrat wyglądałby tak samo :-), oto demo: jsbin.com/opamiq/1
Dziad Borowy
7
również upewnij się, że jest to blok
chovy
3
Aktualizacja 2018: Potrzebna transform: rotate(90deg);jest tylko
rinogo
28

Użyj następujących w swoim 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);
}
عثمان غني
źródło
37
Sugestia dla wszystkich przyszłych czytelników: zawsze umieszczaj prefiksy reguł przed definicją standardów. W takim przypadku wszystkie reguły z prefiksem przeglądarki powinny znajdować się przed transform: rotate(90deg);regułą. Powodem byłoby zazwyczaj to, że standardy mają pierwszeństwo, aw CSS ostatnia definicja zawsze wygrywa.
Jesse
14

Użyj 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>
Rozwiń fragment kodu

Kliknij „Uruchom fragment kodu”, a następnie najedź kursorem na pole, aby zobaczyć efekt transformacji.

Realistycznie żadne inne prefiksy nie są potrzebne. Zobacz Czy mogę używać transformacji CSS3?

Zaz
źródło
1
Byłoby lepiej jako komentarz pod istniejącą odpowiedzią ... lub dokonać edycji istniejącej odpowiedzi, stwierdzając, że inne prefiksy prawdopodobnie nie są potrzebne. Posiadanie 3 dokładnie takich samych odpowiedzi jest nieprzydatne.
misterManSam
@Zaz jak utrzymać obrócone pole nawet po odsłonięciu?
heyayush,
@ayushsharma: Użyj JS lub zobacz, czy stan „Ukryj CSS” pozostaje po „odsłonięciu” : sugeruje jeden hack #element{transition: 9999999s}(co powoduje, że przejście z powrotem do normalnego trwa na zawsze) i #element:hover{transition: .3s}(lub jak długo chcesz, aby rotacja trwała).
Zaz
4

możesz użyć właściwości css3 tryb zapisu tryb zapisu: tb-rl

sztuczki css

mozilla

Ashraf
źródło
0

Możemy dodać następujące elementy do określonego znacznika w CSS:

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

W przypadku połowy obrotu zmień 90na 45.

subindas pm
źródło