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

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

使用变换:旋转(90度):

# container_2 { 边框:1px实体; 填充:.5em; 宽度:5 em; 身高:5 em; 过渡:.3s全部;/*逐渐旋转而不是立即旋转*/ ｝ # container_2:{徘徊 -webkit-transform:旋转(90度);/*支持Safari和Android浏览器*/ -ms-transform:旋转(90度);/*支持ie9 */ 变换:旋转(90度); ｝ <div id="container_2">这个箱子需要旋转90度;在徘徊。< / div >

单击“运行代码片段”，然后将鼠标悬停在方框上以查看转换的效果。

实际上，不需要其他带前缀的条目。我可以使用CSS3转换吗?

在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来实现这一点，例如:

#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中为特定的标签添加以下内容:

-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