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

Ответы:

465

Вам нужен CSS для этого, например:

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

Демо-версия:

Показать фрагмент кода

(В демонстрации есть поворот на 45 градусов, так что вы можете увидеть эффект)

Примечание:-o- и -moz-префиксы уже не актуально и , вероятно , не требуется . IE9 требует, -ms-а Safari и браузер Android требуют-webkit-

Обновление 2018: префиксы поставщиков больше не нужны. Только transformдостаточно. (спасибо @rinogo)

Дзиад Боровы
источник
это не меняется, я использую это в файле CSS
user1808433
9
@ user1808433 потому что при повороте на 90 градусов квадрат будет выглядеть одинаково :-), вот демо: jsbin.com/opamiq/1
Дзиад Борови
7
Кроме того, убедитесь, что это блок
chovy
3
Обновление 2018: необходимо толькоtransform: rotate(90deg);
Риного
28

Используйте следующее в вашем 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);
}
عثمان غني
источник
38
Как совет всем будущим читателям: всегда ставьте префиксные правила перед определением стандартов. В этом случае все правила с префиксом браузера должны быть перед transform: rotate(90deg);правилом. Причина в том, что обычно вы хотите, чтобы стандарты имели приоритет, а в CSS последнее определение всегда побеждает.
Джесси
14

Используйте 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?

Zaz
источник
1
Это было бы лучше в качестве комментария к существующему ответу ... или внесения изменений в существующий ответ, заявляющего, что другие префиксы, вероятно, не нужны. Наличие 3-х практически одинаковых ответов бесполезно.
MisterManSam
@Zaz, как держать коробку повернутой даже после того, как я покажу?
хейаюш
@ayushsharma: используйте JS или посмотрите, чтобы состояние «CSS CSS Hover» оставалось после «разворота» : один из предложенных хаков есть #element{transition: 9999999s}(что заставляет переход обратно к обычному #element:hover{transition: .3s}длится вечно) и (или сколько бы вы ни хотели, чтобы ротация продолжалась).
Заз
0

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

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

В случае половины поворота изменить 90на 45.

Subindas вечера
источник