如何确定CSS3过渡中的旋转方向？

Question

如何确定CSS3过渡中的旋转方向？

我想通过CSS3变换和过渡将对象从-180度旋转到180度.这很好,但我想控制旋转方向.如何确定它是顺时针还是逆时针？

Answer 1

0 .. 180是顺时针,0 .. -180是逆时针.因此,正数顺时针旋转,负数 - 反之亦然.

我创建了一个如何旋转的示例:

<html>
<style type="text/css">
.rotatedDiv {
    margin-top: 200px;
    margin-left: 200px;
    -webkit-transition: -webkit-transform 3s ease-in;
    -webkit-transform: rotate(1deg); 
    -moz-transform: rotate(1deg);
}

</style>

<body>
<div class="rotatedDiv" onclick="this.style.webkitTransform='rotate(-100deg)'">
This div will do a spin when clicked!
</div>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

首先我们显示旋转的div.当您单击它时,它将旋转.根据值 - 负值或正值,它将逆时针或顺时针旋转.

归档时间：	14 年，10 月前
查看次数：	31735 次
最近记录：	12 年，10 月前