Як я можу повернути 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

— Dziad Borowy

7

Також переконайтесь, що його блок

— човен

3

2018 Оновлення Тільки transform: rotate(90deg);потрібно

— rinogo

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);
}

— عثمان غني
джерело

37

Так само, як пропозиція для всіх майбутніх читачів: завжди розміщуйте попередньо встановлені правила перед визначенням стандартів. У цьому випадку всі правила, встановлені браузером, повинні бути перед 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?

— Заз
джерело

1

Це було б краще, як коментар під існуючою відповіддю ... або внесіть зміни до наявної відповіді, вказуючи, що інші префікси, ймовірно, не потрібні. Мати 3 майже однакових відповіді - це не корисно.

— misterManSam

@Zaz як тримати коробку обертаною навіть після того, як я зніму?

— heyayush

@ayushsharma: Використовуйте JS або подивіться, щоб стан CSS Hover залишався після "відключення" : один хак запропонований є #element{transition: 9999999s}(що змушує перехід назад до нормального зайняти назавжди) і #element:hover{transition: .3s}(або як би довго ви хотіли, щоб обертання прийняло).

— Заз

4

ви можете використовувати властивість css3 властивості запису в режимі запису: tb-rl

css-трюки

мозіла

— Ашраф
джерело

0

До певного тегу в CSS ми можемо додати наступне:

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

У разі половинного обертання змінити 90на 45.

— субінди вечора
джерело