Ich habe derzeit eine Reihe von Containern mit einer Flip-Animation, die bei Hover aktiviert. Ich möchte, dass sie nicht nur beim Hover, sondern auch bei einem Klick auf ein JavaScript-Button aktiviert werden, bei dem nur eine Taste zum Umdrehen verwendet wird.Javascript-Taste zum Umschalten mehrerer CSS-Animationen
HTML:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<a href="link1.html">
<img src="images/frontimg1.jpg"/>
</a>
</div>
<div class="back">
<div class="fliplinks">
<a href="link1.html">
<p>text1</p>
</a>
</div>
</div>
</div>
</div>
Diese werden für so viele Objekte wiederholt, wie ich verwenden und stützen sich auf die folgenden CSS:
.flip-container {
float:left;
margin: 7.5px;
}
/* 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: 210px;
height: 210px;
}
/* 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);
}
Edit: A jsfiddle wie gewünscht: https://jsfiddle.net/futbyyef/
Wenn Sie eine jsfiddle bereitstellen, wäre es einfacher, es umzuformatieren, um zu erreichen, was Sie wollen. Sie sollten bewirken, dass eine Klasse denselben Effekt auslöst wie der Hover. und mit Javascript können Sie diese Klasse für alle Elemente umschalten (sofort oder mit einer bestimmten Verzögerung, abhängig von dem Effekt, nach dem Sie suchen). –