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

我有一个<div> ,我想旋转90度:

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

我怎样才能做到这一点?

你需要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> 

在你的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); } 

使用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属性写模式写模式:tb-rl

CSS-技巧

Mozilla浏览器

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

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

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

谢谢