Wie kann ich ein HTML <div> um 90 Grad drehen?

245

Ich habe ein <div> , die ich um 90 Grad drehen möchte:

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

Wie kann ich das machen?

html css

— user1808433
quelle

6

Was Google für Sie tun kann :): stackoverflow.com/questions/2449668/…

— Benz

Ein Beispiel: w3schools.com/cssref/css3_pr_transform.asp

— specialscope

465

Sie benötigen CSS, um dies zu erreichen, z.

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

Demo:

Code-Snippet anzeigen

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

Expand snippet

(Die Demo dreht sich um 45 Grad, sodass Sie den Effekt sehen können.)

Hinweis: Die Präfixe -o-und -moz-sind nicht mehr relevant und wahrscheinlich nicht erforderlich . IE9 erfordert -ms-und Safari und der Android-Browser erfordern-webkit-

Update 2018: Herstellerpräfixe werden nicht mehr benötigt. Nur transformist ausreichend. (danke @rinogo)

— Dziad Borowy
quelle

es ändert sich nicht ich benutze dies in CSS-Datei

— user1808433

9

@ user1808433 weil bei 90 Grad Drehung das Quadrat gleich aussehen würde :-), hier ist eine Demo: jsbin.com/opamiq/1

— Dziad Borowy

7

— Stellen Sie

3

Update 2018: Nur transform: rotate(90deg);erforderlich

— Rinogo

28

Verwenden Sie Folgendes in Ihrem 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);
}

— عثمان غني
quelle

37

Nur als Vorschlag an alle zukünftigen Leser: Stellen Sie die vorangestellten Regeln immer vor die Standarddefinition. In diesem Fall sollten alle Regeln mit Browserpräfix vor der transform: rotate(90deg);Regel stehen. Der Grund dafür ist, dass normalerweise die Standards Vorrang haben sollen und in CSS immer die letzte Definition gewinnt.

— Jesse

14

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

Erweitern Sie das Snippet

Klicken Sie auf "Code-Snippet ausführen" und bewegen Sie den Mauszeiger über das Feld, um den Effekt der Transformation zu sehen.

Realistisch gesehen werden keine weiteren Präfixeinträge benötigt. Siehe Kann ich CSS3-Transformationen verwenden?

— Zaz
quelle

1

Dies ist besser als Kommentar unter einer vorhandenen Antwort ... oder als Bearbeitung einer vorhandenen Antwort, die besagt, dass die anderen Präfixe wahrscheinlich nicht benötigt werden. 3 ziemlich genau die gleichen Antworten zu haben, ist nicht hilfreich.

— MisterManSam

@Zaz, wie man die Box auch nach dem Aufheben des Mauszeigers gedreht hält?

— Heyayush

@ayushsharma: Verwenden Sie JS oder sehen Sie, wie der CSS-Hover-Status nach dem Aufheben des Hovers beibehalten wird : Ein Hack wird vorgeschlagen #element{transition: 9999999s}(der Übergang zum Normalzustand dauert ewig) und #element:hover{transition: .3s}(oder wie lange die Rotation dauern soll).

— Zaz

4

können Sie CSS3 - Eigenschaft verwenden Schreibmodus tb-rl: Schreibmodus

CSS-Tricks

Mozilla

— Ashraf
quelle

0

Wir können einem bestimmten Tag in CSS Folgendes hinzufügen:

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

Bei Halbrotationsänderung 90zu 45.

— subindas pm
quelle