Question

我有<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>

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

注意： -o-和-moz-前缀为no longer relevant and probably not required。 IE9需要-ms-，Safari和Android浏览器需要-webkit-

更新2018年：不再需要供应商前缀。只有transform就足够了。（感谢@rinogo）

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)：

＆＃13;

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

＆＃13;

<div id="container_2">This box should be rotated 90&deg; on hover.</div>

＆＃13;

点击＆＃34;运行代码段＆＃34;，然后将鼠标悬停在该框上以查看转换效果。

实际上，不需要其他带前缀的条目。请参阅 Can I use CSS3 Transforms?

Answer 4

您可以使用css3属性书写模式 写作模式：tb-rl

css-tricks

mozilla

Answer 5

使用CSS的“ rotate（）”方法：

string jsonToken = @"{'response':{'token':{'token':'123','id':191}}}";
var def = new
{
    response = new
    {
        token = new { token = string.Empty, id = 0 }
    }
};

var deserializedToken = JsonConvert.DeserializeAnonymousType(jsonToken, def);

p{
    display: none;
}

Answer 6

我们可以将以下内容添加到CSS中的特定标记：

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

如果轮换一半90改为45。

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

6 个答案: