Rotazione di un'immagine di sfondo con CSS3

Question

Ho un'immagine di sfondo con una freccia rivolta verso destra. Quando un utente fa clic sul pulsante, lo stato selezionato cambia la freccia per puntare verso il basso (utilizzando una diversa posizione di sfondo nel mio sprite dell'immagine).

C'è comunque un modo per animare questo usando CSS3 quindi una volta cliccato il pulsante e jQuery lo assegna a una classe "selezionata", ruoterà in un'animazione (solo 90 gradi) dalla destra alla fine? (preferibilmente usando la singola immagine/posizione con la freccia che punta a destra)

Non sono sicuro se sia necessario utilizzare i fotogrammi di animazione di trasformazione o di animazione.

Answer 1

si potrebbe usare la ::after (o ::before) pseudo-element, per generare l'animazione

div /*some irrelevant css */ 
{ 
    background:-webkit-linear-gradient(top,orange,orangered); 
    background:-moz-linear-gradient(top,orange,orangered); 
    float:left;padding:10px 20px;color:white;text-shadow:0 1px black; 
    font-size:20px;font-family:sans-serif;border:1px orangered solid; 
    border-radius:5px;cursor:pointer; 
} 

/* element to animate */ 
div::after    /* you will use for example "a::after" */ 
{ 
    content:' ►';  /* instead of content you could use a bgimage here */ 
    float:right; 
    margin:0 0 0 10px; 
    -moz-transition:0.5s all; 
    -webkit-transition:0.5s all; 
} 

/* actual animation */ 
div:hover::after   /* you will use for example "a.selected::after" */ 
{ 
    -moz-transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); 
} 

HTML :

<div>Test button</div> 

nel tuo caso utilizzerà classe element.selected invece di

jsfiddle demo: http://jsfiddle.net/p8kkf/

speranza che questo aiuta

Answer 2

Ecco una classe CSS rotante che ho usato per far girare un'immagine di sfondo:

.rotating { 
    -webkit-animation: rotating-function 1.25s linear infinite; 
    -moz-animation: rotating-function 1.25s linear infinite; 
     -ms-animation: rotating-function 1.25s linear infinite; 
     -o-animation: rotating-function 1.25s linear infinite; 
      animation: rotating-function 1.25s linear infinite; 
} 

@-webkit-keyframes rotating-function { 
    from { 
    -webkit-transform: rotate(0deg); 
    } 
    to { 
    -webkit-transform: rotate(360deg); 
    } 
} 

@-moz-keyframes rotating-function { 
    from { 
    -moz-transform: rotate(0deg); 
    } 
    to { 
    -moz-transform: rotate(360deg); 
    } 
} 

@-ms-keyframes rotating-function { 
    from { 
    -ms-transform: rotate(0deg); 
    } 
    to { 
    -ms-transform: rotate(360deg); 
    } 
} 

@-o-keyframes rotating-function { 
    from { 
    -o-transform: rotate(0deg); 
    } 
    to { 
    -o-transform: rotate(360deg); 
    } 
} 

@keyframes rotating-function { 
    from { 
    transform: rotate(0deg); 
    } 
    to { 
    transform: rotate(360deg); 
    } 
}