Как я могу повернуть HTML <div> 90 градусов? У меня есть <div>, который я хочу повернуть на 90 градусов: <div id="container_2"></div> Как я могу это сделать? Ответ 1 Для этого вам нужен 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> Ответ 2 Используйте следующие в 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); } Ответ 3 Используйте 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° on hover.</div> Ответ 4 вы можете использовать свойство css3 режим записи режим записи: tb-rl css-tricks mozilla Ответ 5 Мы можем добавить этот конкретный тег в CSS -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); В случае половинного поворота измените 90 на 45 Спасибо
Ответ 1 Для этого вам нужен 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>
Ответ 2 Используйте следующие в 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); }
Ответ 3 Используйте 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° on hover.</div>
Ответ 5 Мы можем добавить этот конкретный тег в CSS -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); В случае половинного поворота измените 90 на 45 Спасибо