如何确定CSS3过渡中的旋转方向？ [英] How to determine direction of rotation in CSS3 transitions?
问题描述
我想通过CSS3变换和转换将对象从-180度旋转到180度。这工作正常，但我想控制旋转的方向。如何确定它是顺时针还是逆时针？
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?
推荐答案
0 .. 180是顺时针，0 .. -180是逆时针。
0 .. 180 is clockwise, 0 .. -180 is counterclockwise. So, positive number rotates clockwise, negative - other way around.
我创建了一个如何旋转的示例：
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>
首先我们显示旋转的div。当你点击它，它会旋转。根据值 - 负或正，它将逆时针或顺时针旋转。
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.
这篇关于如何确定CSS3过渡中的旋转方向？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
