Как я могу повернуть HTML <div> на 90 градусов?

Question

У меня есть <div> что я хочу повернуть на 90 градусов:

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

Как я могу это сделать?

Answer 1

Вам нужен 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)

Answer 2

Используйте следующее в вашем 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);
} 

Answer 3

Использование 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 Transforms?

Answer 4

Вы можете использовать режим записи свойства css3: tb-rl

CSS-уловок

Mozilla

Answer 5

Используйте метод css "rotate()":

         div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#rotate{
  transform: rotate(90deg);
}

         <div>
normal div
</div>
<br>

<div id="rotate">
This div is rotated 90 degrees
</div>

Answer 6

Мы можем добавить следующее к определенному тегу в CSS:

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

В случае изменения половины вращения 90 в 45,