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

Antworten:

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

(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