我如何旋转HTML <div> 90度？

我有一个<div> ，我想旋转90度：

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

我怎样才能做到这一点？

Answer 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> 

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

Answer 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&deg; on hover.</div> 

Answer 4

你可以使用css3属性写模式写模式：tb-rl

CSS-技巧

Mozilla浏览器

Answer 5

我们可以将这添加到CSS中的特定标签

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

在半旋转的情况下，请将90改为45

谢谢