Direzione di rotazione in Animazione CSS \ Trasformazione

Question

Un dubbio riguardante Animazione CSS \ trasformazione. Sto cercando di capire le animazioni CSS e in esecuzione nel seguente problema:

Una semplice div con l'animazione collegato ad esso in CSS come di seguito

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

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

Caso 1:

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

Caso 2 (la trasformazione dello 0% viene divisa in 90 + 89 gradi anziché 179):

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

Perché il primo caso ruota in senso orario e il secondo caso ruota in senso antiorario?

Answer 1

Questo potrebbe essere solo un bug con trasformazioni di rotazione, che affronterò dopo un po 'di background.

Sfondo

Prima di tutto, il modo in cui le rotazioni sono supposto al lavoro è in relazione a un cerchio. Se si specifica un numero di gradi, questo posizionerà l'elemento nella posizione dettata da una quantità di rotazione specificata dai gradi. Quando non si anima una rotazione, ci sono molti modi per rappresentare la posizione dell'elemento. Codice Univoco è a metà destra nel loro commento in quanto il posizionamento di 357 gradi e -3 gradi è lo stesso, ma quando si anima, sono molto diversi. Passare da 0 gradi a -3 gradi è una piccola rotazione in senso antiorario, mentre passando da 0 gradi a 357 gradi è una grande rotazione in senso orario.

risultati

Cosa hai trovato sembra ignorare questo calcolo (sia in Firefox e Chrome da quello che ho provato fuori). Da quello che vedo, che unisce rotate trasforma in modo efficace inverte il senso che la rotazione dovrebbe andare in, anche se si sta combinando con una rotazione 0deg:

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

Sembra che si può risolvere questo problema "unendo" la rotazione trasforma in entrambe le fasi di animazione:

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

Infine, sembra che il numero di materie "combinazioni". Se si combinano 2 rotazioni in un unico passaggio, ma 3 in un altro, il comportamento imprevisto si verifica:

// 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); 
    } 
} 

Conclusione

Questo probabilmente non è la risposta più grande, ma unendo le rotazioni come questo solo doesn' sembra che sia documentato ovunque. Suggerirei di non combinare le stesse trasformazioni rotate (è comunque possibile combinare rotateX e rotateY senza questa stranezza) e rispettare la somma dei valori dei gradi.

Nel caso in cui qualcuno che trova questa spiegazione voglia forse saperne di più su questo comportamento di quello che ho, ecco uno fiddle con gli esempi sopra come punto di partenza.