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

245

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

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

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

html css

— user1808433
источник

6

Что Google может сделать для вас :): stackoverflow.com/questions/2449668/…

— Benz

Пример: w3schools.com/cssref/css3_pr_transform.asp

— specialscope

465

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

— 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}длится вечно) и (или сколько бы вы ни хотели, чтобы ротация продолжалась).

— Заз

4

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

CSS-уловок

Mozilla

— Ашраф
источник

0

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

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

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

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