Как определить направление вращения в переходах CSS3?

Я хотел бы повернуть объект от -180 градусов до 180 градусов с помощью преобразований CSS3 и переходов. Это прекрасно работает, но я бы хотел контролировать направление вращения. Как определить, будет ли он двигаться по часовой стрелке или против часовой стрелки?

Ответы

Ответ 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. Когда вы нажмете на него, он будет вращаться. В зависимости от значения - отрицательный или положительный, он вращается против часовой стрелки или по часовой стрелке.

Ответ 2

Кажется, что вам также нужно помнить о том, чтобы ввести "из" исходных конкретных значений, иначе знак направления +/- не будет хорошо себя вести.