Reputation: 115
So I'm working a coin flip minigame and I need an animation. My code so far is:
HTML:
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="http://i.imgur.com/YS84SGq.png" alt="" />
</div>
<div class="back">
<img src="http://i.imgur.com/lDR0Xj8.png" alt="" />
</div>
</div>
</div>
CSS:
.flip-container
{
position: absolute;
perspective: 1000;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-top: 25%;
}
.flip-container, .flip-container .front, .flip-container .back
{
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
width: 150px;
height: 150px;
overflow: hidden;
}
.front img, .back img
{
width: 150px;
height: 150px;
}
.flip-container .flipper
{
transition: 3s;
transform-style: preserve-3d;
position: relative;
}
.flip-container .flipper .front, .flip-container .flipper .back
{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.flip-container .flipper .front
{
z-index: 2;
transform: rotateY(0deg);
}
.flip-container .flipper .back
{
transform: rotateY(180deg);
}
.flip-container:hover .flipper, .flip-container.hover .flipper
{
transform: rotateY(720deg);
}
A working demo: https://jsfiddle.net/k0pjcftp/
As you can see, animation works fine on hover. But I need to trigger it somehow through javascript, and I have no idea how. I tried adding a css class with transform(...)
but animation wasn't working. Any ideas?
Upvotes: 1
Views: 670
Reputation: 2165
You can use jQuery's hover method and toggle the hover
class on your container.
$('.flip-container').hover(function() {
$(this).toggleClass('hover');
});
.flip-container
{
position: absolute;
perspective: 1000;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-top: 25%;
}
.flip-container, .flip-container .front, .flip-container .back
{
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
width: 150px;
height: 150px;
overflow: hidden;
}
.front img, .back img
{
width: 150px;
height: 150px;
}
.flip-container .flipper
{
transition: 3s;
transform-style: preserve-3d;
position: relative;
}
.flip-container .flipper .front, .flip-container .flipper .back
{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.flip-container .flipper .front
{
z-index: 2;
transform: rotateY(0deg);
}
.flip-container .flipper .back
{
transform: rotateY(180deg);
}
/*.flip-container:hover .flipper,*/ .flip-container.hover .flipper
{
transform: rotateY(720deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="http://i.imgur.com/YS84SGq.png" alt="" />
</div>
<div class="back">
<img src="http://i.imgur.com/lDR0Xj8.png" alt="" />
</div>
</div>
</div>
Upvotes: 2