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

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

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

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

194
css html

5 ответов

для этого вам нужен 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)

355

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

использовать 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?

10

вы можете использовать свойство css3 написание-режим написание-режим: ТБ-РЛ

модели CSS-уловок, которые

mozilla

2

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

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

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

0