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

245

Mam, <div>że chcę obrócić o 90 stopni:

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

W jaki sposób mogę to zrobić?

html css

— użytkownik1808433
źródło

6

Co Google może dla Ciebie zrobić :): stackoverflow.com/questions/2449668/…

— Benz

Przykład: w3schools.com/cssref/css3_pr_transform.asp

— specialscope

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

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

Rozwiń 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