CSS 如何确定 CSS3 过渡中的旋转方向？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4072869/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to determine direction of rotation in CSS3 transitions?
提问by Monokai
I'd like to rotate an object from -180 degrees to 180 degrees via CSS3 transforms and transitions. This works fine, but I'd like to control the direction of rotation. How to determine if it will be going clockwise or counter clockwise?
我想通过 CSS3 转换和过渡将对象从 -180 度旋转到 180 度。这很好用，但我想控制旋转方向。如何确定是顺时针还是逆时针？
回答by Roman Goyenko
0 .. 180 is clockwise, 0 .. -180 is counterclockwise. So, positive number rotates clockwise, negative - other way around. You can also keep increasing/decreasing the number to continue rotation, the browser will remove additional 360s.
0 .. 180 是顺时针，0 .. -180 是逆时针。所以，正数顺时针旋转，负数 - 反过来。您也可以继续增加/减少数字以继续旋转，浏览器将删除额外的 360。
I created an example of how to rotate:
我创建了一个如何旋转的示例：
<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>
First we display rotated div. When you click on it, it will rotate. Depending on the value - negative or positive it will rotate counter-clockwise or clockwise.
首先我们显示旋转的div。当你点击它时，它会旋转。根据值 - 负数或正数，它将逆时针或顺时针旋转。
回答by Uri
It seems that you also need to remember to put in the "from" initial concrete values, otherwise the +/- direction sign won't behave well.
似乎您还需要记住输入“from”初始具体值，否则 +/- 方向符号将表现不佳。
