JS Animation Spin auf Hover

Question

Dies ist meine erste Frage zu Stackoverflow.

Ich frage mich, ob jemand mich auf eine Lösung/Ressource auf animierende Schaltflächen mit JS/JQuery zeigen kann.

Insbesondere die Animation, die ich nicht herausfinden kann, dreht eine kreisförmige Schaltfläche um 180 Grad beim Schweben.

Thanks :)

Answer 1

Die intuitive Antwort fand ich, war dies:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
    <div class="flipper"> 
     <div class="front"> 
      <!-- front content --> 
     </div> 
     <div class="back"> 
      <!-- back content --> 
     </div> 
    </div> 
</div> 

    /*CSS entire container, keeps perspective */ 
.flip-container { 
    perspective: 1000px; 
} 
    /* flip the pane when hovered */ 
    .flip-container:hover .flipper, .flip-container.hover .flipper { 
     transform: rotateY(180deg); 
    } 

.flip-container, .front, .back { 
    width: 320px; 
    height: 480px; 
} 

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

    position: relative; 
} 

/* hide back of pane during swap */ 
.front, .back { 
    backface-visibility: hidden; 

    position: absolute; 
    top: 0; 
    left: 0; 
} 

/* front pane, placed above back */ 
.front { 
    z-index: 2; 
    /* for firefox 31 */ 
    transform: rotateY(0deg); 
} 

/* back, initially hidden pane */ 
.back { 
    transform: rotateY(180deg); 
} 

Weitere Erläuterungen finden Sie hier: https://davidwalsh.name/css-flip

Answer 2

Sie css Keyframes

div { 
    width: 100px; 
    height: 100px; 
    background: red; 
    position :relative; 
    -webkit-animation: mymove 1s infinite; /* Chrome, Safari, Opera */ 
    animation: mymove 1s infinite; 
} 


/* Standard syntax */ 
@keyframes mymove { 
     from { transform: rotateY(0deg);} 
to { transform: rotateY(360deg); 

} 

Answer 3

Sie können Schaltflächen animieren CSS verwenden können. Unter http://www.w3schools.com/css/css3_animations.asp können Sie mehr über CSS-Animationen erfahren. Vielleicht möchten Sie auch über CSS-Übergänge unter http://www.w3schools.com/css/css3_transitions.asp lernen. Wenn Sie eine Animation mit JS erstellen möchten, setzen Sie eine CSS-Transition für das HTML-Element, das Sie animieren möchten, und verwenden Sie dann JS, um CSS-Eigenschaften wie background-color und transform festzulegen. Sie können auf das CSS eines Elements zugreifen, indem Sie element.style.property verwenden. Ersetzen Sie property durch die Eigenschaft, die Sie ändern oder hinzufügen möchten.