ฉันจะหมุน HTML <div> 90 องศาได้อย่างไร

ฉันมีสิ่ง<div>ที่ฉันต้องการหมุน 90 องศา:

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

ฉันจะทำสิ่งนี้ได้อย่างไร

คุณต้องการ CSS เพื่อให้บรรลุสิ่งนี้เช่น:

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

การสาธิต:

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

(มีการหมุน 45 องศาในการสาธิตเพื่อให้คุณเห็นผล)

หมายเหตุ:-o-และ-moz-คำนำหน้าเป็นไม่เกี่ยวข้องและอาจจะไม่จำเป็นต้องใช้ IE9 ต้องการ-ms-และ Safari และเบราว์เซอร์ Android ที่ต้องการ-webkit-

อัปเดต 2018:ไม่ต้องใช้ส่วนนำหน้าผู้ขายอีกต่อไป เท่านั้นtransformก็เพียงพอแล้ว (ขอบคุณ @rinogo)

ใช้สิ่งต่อไปนี้ใน 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);
} 

การใช้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>

คลิก "เรียกใช้ข้อมูลโค้ด" จากนั้นเลื่อนเมาส์เหนือช่องเพื่อดูผลกระทบของการแปลง

ในความเป็นจริงไม่จำเป็นต้องมีรายการนำหน้าอื่น ๆ ดูฉันจะใช้การแปลง CSS3 ได้ไหม?

คุณสามารถใช้โหมด การเขียนคุณสมบัติ css3 โหมดการเขียน: tb-rl

CSS-เทคนิค

Mozilla

เราสามารถเพิ่มสิ่งต่อไปนี้ในแท็กเฉพาะใน CSS:

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

ในกรณีของการเปลี่ยนแปลงครึ่งหมุนไป9045