Question

我想通过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>

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

Answer 2

您似乎还需要记住输入“from”初始具体值，否则+/-方向符号将无法正常运行。

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

2 个答案: