We Keep Coding

I want to create a vote system with jQuery but not working

I am trying to create a function with jQuery but I can't. When you press a button then an arrow will move to 36 degrees. I have 5 buttons and the circle is 180 degrees.
My code is working in one way but it's not in reverse, which means when you press button 1 to 5 it's working but when I try to click randomly then it is not working.
Here is what i am trying to build
$(document).ready(function() {
$("#ang36").click(function() {
$("#silder_image").removeClass("animate1");
$("#silder_image").addClass("animate1");
});
$("#ang72").click(function() {
$("#silder_image").removeClass("animate2");
$("#silder_image").addClass("animate2");
});
$("#ang108").click(function() {
$("#silder_image").removeClass("animate3");
$("#silder_image").addClass("animate3");
});
$("#ang144").click(function() {
$("#silder_image").removeClass("animate4");
$("#silder_image").addClass("animate4");
});
$("#ang180").click(function() {
$("#silder_image").removeClass("animate5");
$("#silder_image").addClass("animate5");
});
});
.slider_area {
width: 800px;
margin: 0 auto;
position: relative;
margin-top: 400px;
}
.silder_image {
width: 100px;
height: 100px;
}
.animate1 {
transform: rotate(36deg);
-ms-transform: rotate(36deg);
-webkit-transform: rotate(36deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate1 img,
.animate2 img,
.animate3 img,
.animate4 img,
.animate5 img {
transform: rotate(-90deg);
}
.animate2 {
transform: rotate(72deg);
-ms-transform: rotate(72deg);
-webkit-transform: rotate(72deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate3 {
transform: rotate(108deg);
-ms-transform: rotate(108deg);
-webkit-transform: rotate(108deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate4 {
transform: rotate(144deg);
-ms-transform: rotate(144deg);
-webkit-transform: rotate(144deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate5 {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform-origin: center center;
transition-duration: 5s;
}
.triggrs {
position: relative;
width: 400px;
bottom: -171px;
left: 0;
}
<div class="slider_area">
<div id="silder_image">
<img src="Slider Vote.png" alt="">
</div>
<div class="triggrs">
<button id="ang36">button1</button>
<button id="ang72">button2</button>
<button id="ang108">button3</button>
<button id="ang144">button4</button>
<button id="ang180">button5</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

I created another approach which could also help you further (maybe).
let needle = document.querySelector('#needle ');
let btns = document.querySelectorAll('button')
btns.forEach( btn=>{ btn.addEventListener('click', function() {
let level = this.dataset.deg;
needle.style.transform = "rotate("+Number(level)+"deg)"});
})
#panel {
height: 50px;
overflow: hidden;
}
.circle{
width: 100px;
height: 100px;
border-radius: 100%;
border: 5px solid grey;
position: relative;
display: flex;
justify-content: center;
transform: rotate(-90deg);
background: #ffffff;
background: linear-gradient(to bottom, #ffffff 0%,#e8e000 50%,#e50000 100%);
}
#needle {
width: 6px;
height: 50px;
background: #4361ff;
transform-origin: bottom;
transition: transform .75s cubic-bezier(.31,-0.52,.84,1.55);
transform: rotate(30deg);
box-sizing: border-box;
margin-left: -3px;
}
.buttons {
margin-top: 2rem;
}
<div id="panel">
<div class="circle">
<div id="needle"></div>
</div>
</div>
<div class="buttons">
<button data-deg="30">1</button>
<button data-deg="60">2</button>
<button data-deg="90">3</button>
<button data-deg="120">4</button>
<button data-deg="150">5</button>
</div>

How to make a smooth transition of a 3d cube animation when you click on one of the faces?

I need to make sure that when you click on one of the faces, the cube rotates smoothly with this face and the animation stops. And when you close the face, the size gradually decreased and the animation continued. Maybe someone did something similar and share an example?
Now done only for the TOP. But how to make a smooth animation I can’t imagine.
document.addEventListener("DOMContentLoaded", function() {
let cube = document.querySelector('#D3Cube');
let side1 = document.querySelector('#side1');
let closeBtn = document.querySelector('.closeLink');
cube.addEventListener('mouseover', function(){
cube.style.animationPlayState = "paused";
});
cube.addEventListener('mouseout', function(){
cube.style.animationPlayState = "running";
});
side1.addEventListener('click', function(){
cube.classList.remove("animatCube");
cube.classList.add("animateTop");
});
closeBtn.addEventListener('click', function(){
cube.classList.remove("animateTop");
cube.classList.add("animatCube");
});
});
#wrapD3Cube {
width: 500px;
height: 500px;
margin: 200px auto;
}
#D3Cube {
width: 300px;
height: 300px;
top: 50px;
transform-style: preserve-3d;
margin: auto;
position: relative;
transform-style: preserve-3d;
}
.animatCube{
animation: cube 5s linear infinite;
transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
}
.animateTop{
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) scale3d(1.5, 1, 1.5);
}
#keyframes cube {
100% { transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg); }
}
#D3Cube > div {
position: absolute;
transition: all 0.5s linear;
width: 300px;
height: 300px;
float: left;
overflow: hidden;
opacity: 0.85;
}
#side1 {
transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: purple;
backface-visibility:hidden;
}
#side2 {
transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #ffaf1c;
backface-visibility:hidden;
}
#side3 {
transform: translateX(0px) translateY(0px) translateZ(150px);
background-color: #58d568;
backface-visibility:hidden;
}
#side4 {
transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #ed3030;
backface-visibility:hidden;
}
#side5 {
transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #1c5ffe;
backface-visibility:hidden;
}
#side6 {
transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #f2f215;
backface-visibility:hidden;
}
<div id="wrapD3Cube">
<div id="D3Cube" class="animatCube">
<div class="slide" id="side1"><a class="closeLink" href="">x</a></div>
<div class="slide" id="side2">2</div>
<div class="slide" id="side3">3</div>
<div class="slide" id="side4">4</div>
<div class="slide" id="side5">5</div>
<div class="slide" id="side6">6</div>
</div>
</div>

When clicking on a face, you can use getComputedStyle(cube).getPropertyValue("transform") to get the current state of transform when clicking on the face.
Then, you appy it in transform property to set that state, remove the animation, add the class to show the face (animateTop) and finally remove the inline transform you just set for the class to take effect.
When going back to normal, you remove inline stopped animation, some the cube animation will happen. After 5 seconds, the animateTop will be removed, then only the animation will continue to run.
I also created two variables for better control: open to check when the face is open or closed. And changing to check when it is transitioning to open or closed.
let open = false;
let changing = false;
document.addEventListener("DOMContentLoaded", function() {
let cube = document.querySelector('#D3Cube');
let side1 = document.querySelector('#side1');
side1.addEventListener('click', function() {
if (changing) {
return;
}
if (!open && !changing) {
open = true;
changing = true;
cube.classList.add('open')
var compTransform = getComputedStyle(cube).getPropertyValue("transform");
cube.style.transform = compTransform;
cube.style.animation = 'none';
cube.classList.add("animateTop");
setTimeout(function() {
cube.classList.remove('closed')
cube.style.removeProperty('transform');
}, 50);
setTimeout(function() {
changing = false;
}, 1640);
} else if (open && !changing) {
open = false;
changing = true;
cube.classList.remove('open')
setTimeout(function() {
cube.classList.remove("animateTop");
cube.classList.add('closed')
changing = false;
}, 4999);
cube.style.removeProperty('animation');
}
});
});
#wrapD3Cube {
width: 500px;
height: 500px;
margin: 200px auto;
}
#D3Cube {
width: 300px;
height: 300px;
top: 50px;
transform-style: preserve-3d;
margin: auto;
position: relative;
transform-style: preserve-3d;
transition: 1.64s;
}
#D3Cube.closed:hover {
animation-play-state: paused;
transition: animation 0s;
}
.closeLink {
color: #f7f7f7;
background-color: #333;
font-size: 20px;
}
.animatCube{
animation: cube 5s linear infinite;
transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
}
.animateTop{
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) scale3d(1.5, 1, 1.5);
}
#keyframes cube {
100% { transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg); }
}
#D3Cube > div {
position: absolute;
transition: all 0.5s linear;
width: 300px;
height: 300px;
float: left;
overflow: hidden;
opacity: 0.85;
}
#side1 {
transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: purple;
backface-visibility:hidden;
}
#side2 {
transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #ffaf1c;
backface-visibility:hidden;
}
#side3 {
transform: translateX(0px) translateY(0px) translateZ(150px);
background-color: #58d568;
backface-visibility:hidden;
}
#side4 {
transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #ed3030;
backface-visibility:hidden;
}
#side5 {
transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #1c5ffe;
backface-visibility:hidden;
}
#side6 {
transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #f2f215;
backface-visibility:hidden;
}
<div id="wrapD3Cube">
<div id="D3Cube" class="animatCube closed">
<div class="slide" id="side1"><a class="closeLink" href="">X</a></div>
<div class="slide" id="side2">2</div>
<div class="slide" id="side3">3</div>
<div class="slide" id="side4">4</div>
<div class="slide" id="side5">5</div>
<div class="slide" id="side6">6</div>
</div>
</div>

How to get jQuery to wait until an animation is finished? [duplicate]

This question already has answers here:
How to use jQuery to wait for the end of CSS3 transitions?
(6 answers)
Closed 5 years ago.
I need to wait (prevent) until this animation (flip card) is finished, if you hover again while animation is running it triggers again and restart the animation.
1) I want leave finish the currently animation even you hover again or you hover out. This is what I have tried so far:
if(!$(this).find(".card").is(':animated')){
$(this).find(".card").toggleClass('flipped')
}
And this:
$(":animated").promise().done(function() {
$(this).find(".card").toggleClass('flipped')
});
2) If you re-hover flipped card (blue part) and you leave the cursor inside dont flip it again to the red part while cursor is inside. I tried this canceling setTimeout with clearTimeout but still doesnt work:
$(document).ready(function () {
var funct = 0
$(".container").hover(function () {
clearTimeout(funct);
$(this).find(".card").addClass('flipped')
}, function () {
var val = $(this).find(".card")
var funct = setTimeout(function () {
val.removeClass('flipped')
}, 2000)
})
})
Note: I use setTimeOut function because I need reverse flip card 2 seconds after you hover out and I want keep it.
Here is the working snippet code:
$(document).ready(function () {
$(".container").hover(function(){
$(this).find(".card").toggleClass('flipped')
}, function(){
var val = $(this).find(".card")
setTimeout(function(){
val.toggleClass('flipped')
}, 2000)
})
})
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front"><p>Test</p></div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>

Run a conditional check first to determine if the trigger class flipped has already been added to the element in question.
This will imply that the animation is still running or currently active (if the class flipped is already present).
if (!$(this).find(".card").hasClass('flipped')) {
$(this).find(".card").toggleClass('flipped')
}
$(document).ready(function() {
$(".container").hover(function() {
if (!$(this).find(".card").hasClass('flipped')) {
$(this).find(".card").toggleClass('flipped')
}
}, function() {
var val = $(this).find(".card")
setTimeout(function() {
val.removeClass('flipped')
}, 1000);
});
});
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>
Then replace the .toggleClass() method with the .removeClass() method in your setTimeout() function for better "fool-proofing" and more reliable application during intended events - so that this class is never unintentionally added when it should simply be removed.
Edit
To address the issue you've pointed out in the comments, see what the embedded code snippet below demonstrates.
Essentially, a class is added as a flag to check against during specific events at specific times.
$(document).ready(function() {
$('.container').hover(function() {
if (!$(this).find('.card').hasClass('flipped')) {
$(this).find('.card').toggleClass('flipped')
}
$(this).find('.card').addClass('hovered'); /* add class - this will be our flag we'll check against */
}, function() {
var val = $(this).find('.card');
$(this).find('.card').removeClass('hovered'); /* remove class - if we refrain from hovering over again, the condition block below will return true and run the code within */
setTimeout(function() {
if(!val.hasClass('hovered')) {
val.removeClass('flipped')
}
}, 1000);
});
});
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>

CSS tile flip on hover

I have some Div Boxes how can i get them flipped on hover? I tried already some examples i found but i cant get it working? Can someone please help me?
.kachel_a_image_1 {
height:150px;
width:150px;
margin:auto auto;
margin-top:15px;
background:red;
}
.kachel_wrapper {
margin: auto auto;
width: 90%;
min-height: 450px;
margin-top: 55px;
text-align: center;
padding:10px;
padding-top:30px;
padding-bottom:20px;
}
.kachel_text {
font-size:10px;
color:white;
line-height:15px;
text-align:center;
}
.kachel {
height: 180px;
width: 180px;
margin-top: 20px;
margin-left: 58px;
background: #6e7176;
display: inline-block;
margin-bottom:30px;
}
<div class="kachel"><div class="kachel_a_image_1"></div><div class="kachel_text">Social</div></div>
I only want to use Css and no JS if its possible. Can someone explain me how this works or giving me a really simple example :S ?

Use transform:
.kachel:hover{
transform: rotateX(150deg);
}
more Information: http://www.w3schools.com/css/css3_3dtransforms.asp
Also if you want to add a duration to the animation use transition-duration
.kachel{
transition-duration: 5s;
}
for changing the content after the hover use the pseudo element :after and the attribute content.
For example:
.kachel:hover:after{
content: 'hovering';
}
You may have to change it a bit, i haven't tested it.

Using transition and backface-visibility.
Probably the best soultion is to use simple transform and backface-visibility. jsfiddle
.front, .back{
width: 100px;
height: 100px;
}
.front{
background-color: blue;
}
.back{
background-color: red;
background-image: url("https://yt3.ggpht.com/-Bvvd30cZJe4/AAAAAAAAAAI/AAAAAAAAAAA/CxN5F1_QEU8/s100-c-k-no/photo.jpg");
background-size: cover;
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 100px;
height: 100px;
}
/* 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);
}
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
</div>
<div class="back">
</div>
</div>
</div>
Using #-webkit-keyframe
Another approach is to use animation and #-webkit-keyframes. However this will run the animation one time initially. (jsfiddle)
.box, .wrapper {
width: 100px;
height: 100px;
position: absolute;
}
.back {
transform: rotateY(90deg);
background-color: red;
-webkit-animation: in 0.2s forwards;
animation in 1s forwards;
-webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */
animation-delay: 0.2s;
}
.front {
transform: rotateY(90deg);
background-color: blue;
-webkit-animation: out 0.2s forwards;
animation out 0.2s forwards;
background-image: url("https://yt3.ggpht.com/-Bvvd30cZJe4/AAAAAAAAAAI/AAAAAAAAAAA/CxN5F1_QEU8/s100-c-k-no/photo.jpg");
background-size: cover;
}
.wrapper:hover .box.back {
-webkit-animation: out 0.2s forwards;
animation: out 0.2s forwards;
}
.wrapper:hover .box.front {
-webkit-animation: in 0.2s forwards;
animation: in 0.2s forwards;
-webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */
animation-delay: 0.2s;
}
#-webkit-keyframes in {
from {
-webkit-transform: rotateY(90deg);
}
to {
-webkit-transform: rotateY(0deg);
}
}
#-webkit-keyframes out {
0% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(90deg);
}
}
<div class="wrapper">
<div class="box back"></div>
<div class="box front"></div>
</div>

For this I would use backface-visibility in conjunction with transform
<div class="container">
<div class="box front">image</div>
<div class="box back">Social</div>
</div>
CSS:
.container {
width: 180px;
height: 180px;
position: relative;
-webkit-transition: all .4s linear;
transition: all .4s linear;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.box {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
color: white;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.front {
background: red;
z-index: 2;
}
.back {
z-index: 1;
background-color: green;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
color:white;
}
.container:hover {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
Here's a JS fiddle
EDIT: The above fiddle has been edited to have an outer wrapper which initiates the flip. This ensures that the animation doesn't jitter.
.wrapper {
width: 180px;
}
.wrapper:hover .container {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

Trigger css hover in javascript

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?

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>