rendere la transizione css3 ruotare sempre nella stessa direzione

Sto provando ad avere un div front-/backside che si muove sempre nella stessa direzione. Ho implementato il flip con css e javascript, ma ho difficoltà a pensare a come farlo ruotare sempre a destra, invece di ruotare a destra e poi tornare a sinistra.rendere la transizione css3 ruotare sempre nella stessa direzione

Io fondamentalmente uso un div con il css follwing

/* flip speed goes here */ 
    .flipper { 
    -webkit-transition: 0.6s; 
    -webkit-transform-style: preserve-3d; 

    -moz-transition: 0.6s; 
    -moz-transform-style: preserve-3d; 

    -o-transition: 0.6s; 
    -o-transform-style: preserve-3d; 

    transition: 0.6s; 
    transform-style: preserve-3d; 

    position: relative; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    padding: 5px; 
    margin-left: 3px; 
    z-index: 3; 
    width: 160px; 
    height: 145px; 
    display:block; 
    }

e quando l'utente fa clic su di essa ho aggiungere la classe "capovolto" al div che cambia il CSS a questo:

 /* flip the pane when hovered */ 
    .flip-container.flipped .flipper { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    }

dovrei semplicemente incrementare sempre l'angolo di rotazione? qualche altra idea?

Ecco lo stato attuale e la piena css in un fiddle

fonte

2013-01-08 tmaximini

http://jsfiddle.net/7WgKL/ 2/ – tmaximini

http://stackoverflow.com/questions/2584138/css3-continous-rotate-animation-just-like-a-loading-sundial Hai visto questo? –

ciao Alex, non ho visto questo, ma questo in realtà non risponde alla mia domanda. il problema è che quando ritorno da 180 a 0 gradi, cambia la direzione della rotazione. – tmaximini

non credo che possa essere fatto con le trasformazioni. Potrebbe essere possibile farlo con i fotogrammi chiave. Un codice simile:

@-webkit-keyframes rotate1 { 
    from {-webkit-transform: rotate(0deg)} 
    to {-webkit-transform: rotate(180deg)} 
} 
@-webkit-keyframes rotate2 { 
    from {-webkit-transform: rotate(180deg)} 
    to {-webkit-transform: rotate(360deg)} 
} 

#rotable { 
    background-color: red; 
    -webkit-animation-name: rotate2; 
    -webkit-animation-duration: 3s; 
    -webkit-transform: rotate(180deg); 
} 

#rotable:hover { 
    background-color: yellow; 
    -webkit-animation-name: rotate1; 
    -webkit-animation-duration: 3s; 
}

fa una cosa simile a quello che vuoi. Si noti che la direzione di rotazione è sempre la stessa.

Un'altra possibilita, transizione e animazione (per il cambiamento in cui la transizione andrebbe nella direzione opposta ...) miscelare

.container { 
 
    perspective: 500px; 
 
} 
 

 
.test { 
 
    transform: rotate(360deg); 
 
    transition: transform 4s; 
 
} 
 

 
.container:hover .test { 
 
    transform: rotateY(180deg); 
 
    animation: turn 4s; 
 
} 
 

 
@keyframes turn { 
 
    from {transform: rotate(0deg);} 
 
} 
 

 
div { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.test { 
 
    background-color: lightblue; 
 

 
}

<div class="container"> 
 
<div class="test">TEST</div> 
 
</div>

fonte

2013-01-11 22:29:46 vals

Non è necessario utilizzare l'animazione, può essere fatto con le transizioni. Le animazioni sono utili quando si devono affrontare problemi di temporizzazione più complicati. In un caso semplice come questo, con solo un inizio e un punto finale, la transizione sarà il modo più efficiente. Inoltre, questo si spezzerà (credo) se si tenta di fare più clic per attivare l'animazione (sospetto che l'OP abbia copiato il codice da un esempio di hover). Questa risposta ha un uso interessante dell'animazione, anche se credo sia un trucco utile per altri problemi. – thisiate

@thisiate Sì, certo che si può fare ispezionando la rotazione della trasformazione corrente e aumentandola sempre. Nella mia risposta, stavo prendendo in considerazione quegli stili fissi in cui ciò che l'OP voleva. Ad ogni modo, buon punto. – vals

@vals sembra sicuro che questo sia vero. Ma questo è un po 'hacky perché la tua variabile alla fine si avvolgerà (anche se un float è così grande che praticamente non accadrebbe mai). Ci dovrebbe essere un modo più pulito per farlo, ma non l'ho ancora trovato. – clearlight

rendere la transizione css3 ruotare sempre nella stessa direzione

risposta

Problemi correlati