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

Question

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

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

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

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

398 5

html css

5 ответов:

Comments

Ничего не найдено.

tborychowski · Accepted Answer · 2018-03-02 11:08:41

для этого вам нужен CSS, например:
#container_2 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
Demo:
#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 градусов вращения в демо, так что вы можете увидеть эффект)

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

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

عثمان غني · Accepted Answer · 2014-08-03 20:16:03

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

Zaz · Accepted Answer · 2016-12-04 19:48:06

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

Ashraf · Accepted Answer · 2017-08-19 06:03:12

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

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

mozilla

subindas pm · Accepted Answer · 2018-07-25 16:16:59

мы можем добавить следующее к определенному тегу в CSS:
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
в случае изменения половины вращения 90 to 45.