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

245

我有一个 <div>要旋转90度的角度：

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

我怎样才能做到这一点？

html css

— 用户名
source

6

Google可以为您做什么：)： stackoverflow.com/questions/2449668/…–

— 奔驰车

例如：w3schools.com/cssref/css3_pr_transform.asp

— specialscope

465

您需要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-前缀不再相关，可能并不需要。IE9需要，-ms-而Safari和Android浏览器需要-webkit-

更新2018：不再需要供应商前缀。仅transform足够。（感谢@rinogo）

— Dziad Borowy
source

它没有改变，我在css文件中使用它

— user1808433 2013年

9

@ user1808433，因为旋转90度后，正方形看起来就一样：-)，这是一个演示：jsbin.com/opamiq/1

— Dziad Borowy 2013年

7

此外，请确保其为块状

— 弯曲的是2014年

3

2018年更新：只transform: rotate(90deg);需要

— rinogo'3

28

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

— عثمانغني
source

37

就像所有未来读者的建议一样：始终将前缀规则放在标准定义之前。在这种情况下，所有浏览器前缀的规则都应在transform: rotate(90deg);规则之前。原因是通常情况下，您希望标准优先，而在CSS中，最后的定义总是胜出。

— 杰西2014年

14

用途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转换吗？

— 扎兹
source

1

最好将其作为现有答案下的注释...，或者对现有答案进行编辑以表明可能不需要其他前缀。拥有3个几乎完全相同的答案是无济于事的。

— misterManSam

@Zaz即使我悬停后也如何保持盒子旋转？

— heyayush

@ayushsharma：使用JS或查看“取消悬停”后保持CSS悬停状态保持不变：建议使用一种技巧#element{transition: 9999999s}（这会使过渡过渡到正常状态需要#element:hover{transition: .3s}很长时间）和（或希望进行轮转的时间太长）。

— Zaz

4

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

CSS技巧

Mozilla

— 阿什拉夫
source

0

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

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

如果旋转半圈，请更改90为45。

— Subindas pm
source