Блог

Я пытаюсь заставить свой div поворачиваться на 360 градусов каждый раз, когда я нажимаю на него, используя CSS3 transform rotate. Тем не менее, я также использую CSS3 transform translate для выравнивания моего div по вертикали.

При первом щелчке он применяет весь требуемый CSS, но фактически не вращается, однако после этого все щелчки будут вращаться. Он все время остается выровненным по вертикали.

Не знаете, как решить эту проблему, и любая помощь приветствуется 🙂

Мой css:

     #my-div {
        height: 300px;
        width: 300px;
        transition: all 0.5s ease-in-out;
        display: block;
        margin: auto;

        /*to vertically align*/
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
 

Мой javascript

 var angle = 360
        $('#my-div').click(function() {
            $(this).css({
                '-webkit-transform' : 'translateY(-50%) rotate(' angle 'deg) ',
                'transform' : 'translateY(-50%) rotate(' angle 'deg)'
            })
            angle  = 360
        });
 

На самом деле переход работает правильно только тогда, когда явно заданы 2 конца, здесь изначально rotate преобразование не задано явно, после первого щелчка оно явно установлено rotate(360deg) , и, следовательно, работают следующие щелчки. Чтобы решить эту проблему, вам просто нужно сначала подать заявку rotate(0deg) на ваш div с помощью кода CSS:

 #my-div {
   /*...*/
   -webkit-transform: translateY(-50%) rotate(0deg);
    transform: translateY(-50%) rotate(0deg);
}
 

Обратите внимание, что я подчеркнул слово «правильно«, на самом деле, если вы установите начальный угол на некоторый угол, равный или меньший 180deg , вы увидите, что переходы в порядке. Я сомневаюсь, что если вы явно не зададите начальное преобразование поворота, поведение определяется браузером, то есть 360deg не будет никакого перехода, в противном случае переход с вращением может быть по часовой стрелке (если angle % 360 меньше или равно 180deg ) и против часовой стрелки, если angle % 360 больше 180deg (обратите внимание наоперация по модулю между angle и 360 ).

ДЕМОНСТРАЦИЯ.