如何旋转一个<潜水员>90度吗?

小开

最佳答案

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

(There's 45 degrees rotation in the demo, so you can see the effect)

Note: The -o- and -moz- prefixes are no longer relevant and probably not required. IE9 requires -ms- and Safari and the Android browser require -webkit-

Update 2018: Vendor prefixes are not needed anymore. Only transform is sufficient. (thanks @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);
}

小开

使用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>

Click "Run code snippet", then hover over the box to see the effect of the transform.

Realistically, no other prefixed entries are needed. See Can I use CSS3 Transforms?

小开

我们可以在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 < / p >

css-tricks

mozilla

小开

使用css &;rotate()&;方法:

div {
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}


div#rotate{
transform: rotate(90deg);
}

<div>
normal div
</div>
<br>


<div id="rotate">
This div is rotated 90 degrees
</div>