使用css的"rotate()"方法:

div { 宽度:100 px; 身高:100 px; 背景颜色:黄色; 边框:1px纯黑色; ｝ div #{旋转 变换:旋转(90度); ｝ < div > 正常的div < / div > < br > < div id = "旋转" > 这个div被旋转90度 < / 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 { 宽度:100 px; 身高:100 px; 边框:1px纯红色; -webkit-transform:旋转(45度); -moz-transform:旋转(45度); -o-transform:旋转(45度); -ms-transform:旋转(45度); 变换:旋转(45度); ｝ < div id = " container_2 " > < / div >

(演示中有45度旋转，所以你可以看到效果)

注意:-o-和-moz-前缀不再相关，可能不是必需的。IE9需要-ms-， Safari和Android浏览器需要-webkit-

2018年更新:不再需要供应商前缀。只有变换是足够的。(感谢@rinogo)

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

使用css的"rotate()"方法:

div { 宽度:100 px; 身高:100 px; 背景颜色:黄色; 边框:1px纯黑色; ｝ div #{旋转 变换:旋转(90度); ｝ < div > 正常的div < / div > < br > < div id = "旋转" > 这个div被旋转90度 < / div >

我们可以在CSS中为特定的标签添加以下内容:

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

在半旋转的情况下，改变90到45。

您可以使用css3属性写入模式 写入方式:tb-rl

css技巧

mozilla