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

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

14 голосов
/ 01 ноября 2010

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

Ответы [ 2 ]

25 голосов
/ 02 ноября 2010

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

3 голосов
/ 04 ноября 2012

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...