Kierunek obrotu w animacji CSS \ Transformacja

Question

Wątpliwości dotyczące animacji CSS \ transform. Próbuję zrozumieć, animacje CSS i działa w następującej kwestii:

Prosty div z animacją z nim związane w CSS jak poniżej

<div id="learn">LEARN</div> 

    #learn { 
    width : 100px; 
    height : 100px; 
    background : blue; 
    position : relative; 
    animation: test1 5s ease-in 2s infinite; 
    } 

Przypadek 1:

@keyframes test1 { 
    0% { 
    transform: rotate(179deg); 
    } 
    100% { 
    transform: rotate(357deg); 
    } 
    } 

Przypadek 2 (transformacja 0% podzielona jest na 90 + 89 st. Zamiast 179):

@keyframes test1 { 
0% { 
transform: rotate(90deg) rotate(89deg); 
} 
100% { 
transform: rotate(357deg); 
} 
} 

Dlaczego pierwszy przypadek obraca się zgodnie z ruchem wskazówek zegara, a drugi przypadek obraca się przeciwnie do ruchu wskazówek zegara?

Answer 1

Może to być po prostu błąd związany z przekształceniami rotacyjnymi, które opiszę po pewnym czasie.

Tło

Po pierwsze, sposób obroty są rzekomą do pracy jest w stosunku do okręgu. Jeśli określisz liczbę stopni, to umieścisz element w pozycji podyktowanej przez stopień obrotu określony przez stopnie. Gdy nie animujesz obrotu, istnieje wiele sposobów na przedstawienie położenia elementu. Kod Wyjątkowo jest w połowie komentarzem w tym, że umieszczenie 357 stopni i -3 stopni jest takie samo, ale podczas animowania są bardzo różne. Przechodzenie od 0 stopni do -3 stopni to mały obrót w lewo, podczas gdy przechodzenie od 0 stopni do 357 stopni jest dużym ruchem wskazówek zegara.

Ustalenia

Co znalazłeś wydaje się ignorować te obliczenia (zarówno w Firefox i Chrome od tego, co mam przetestowane). Z tego co widzę, łącząc rotate przekształca skutecznie odwraca kierunek że obrót powinny się dzieje w, nawet jeśli połączenie z 0deg obrotów:

transform: rotate(90deg); //rotates clockwise 
transform: rotate(0deg) rotate(90deg); //rotates counter-clockwise 

Wydaje się, że problem ten można rozwiązać poprzez "kombinacja" transformacji rotacji w obu etapach animacji:

// this performs a clockwise rotation 
@keyframes test3 { 
    0% { 
     transform: rotate(0deg) rotate(90deg); 
    }  
    100% { 
     transform: rotate(0deg) rotate(357deg); 
    } 
} 

Wreszcie wydaje się, że liczba "kombinacji" ma znaczenie. Jeśli połączyć 2 obroty w jednym etapie, ale 3 w innym, nieoczekiwane zachowanie występuje:

// rotates counter-clockwise since there are unequal rotation transforms 
@keyframes test4 { 
    0% { 
     transform: rotate(0deg) rotate(0deg) rotate(90deg); 
    } 
    100% { 
     transform: rotate(0deg) rotate(357deg); 
    } 
} 

Wnioski

To prawdopodobnie nie jest najlepsza odpowiedź, ale łącząc obroty tak właśnie robi” t wydaje się być udokumentowane w dowolnym miejscu. Sugerowałbym nie łączyć tych samych transformacji rotate (nadal można łączyć rotateX i rotateY bez tej dziwności) i trzymać się sumą wartości stopni.

Jeśli ktoś znajdujący to wyjaśnienie chce być może dowiedzieć się więcej o tym zachowaniu niż ja, oto fiddle z powyższymi przykładami jako punktem wyjścia.