wake-up-neo.com

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

Ich habe einen <div>, den ich um 90 Grad drehen möchte:

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

Wie kann ich das machen?

htmlcss
202
user1808433

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: 

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

(Es gibt eine 45-Grad-Drehung in der Demo, damit 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 -webkit-.

Update 2018: Herstellerpräfixe werden nicht mehr benötigt. Nur transform ist ausreichend. (Danke @rinogo)

381
tborychowski

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);
}
23
عثمان غني

Verwenden Sie 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>

Klicken Sie auf "Code-Snippet ausführen" und bewegen Sie den Mauszeiger darüber, um die Auswirkungen der Transformation zu sehen.

Realistisch sind keine anderen vorangestellten Einträge erforderlich. Siehe Kann ich CSS3-Transformationen verwenden?

10
Zaz

sie können die css3-Eigenschaft writing-mode .__ verwenden. schreibmodus: tb-rl

css-tricks

Mozilla

3
Ashraf

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 halber Drehung 90 in 45 ändern.

0
subindas pm