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 limit clicks on elements

My idea is to create flipping card game. When user flip the card he receives the points, which are randomly generated. Okay, now the user can flip the card and check how much points he will receive, but I want to limit how many cards he can flip. For example, there are 4 cards now. Only 2 of them should be able to open. I'll be thankful for every advice.
$('.front').html('dd');
$('.card').each(function() {
$(this).on("click", function() {
$(this).addClass("flipped");
});
});
function getNumber() {
$('.card .back').each(function() {
var minNumber = 0;
var maxNumber = 2;
var randomnumber = Math.floor(Math.random() * (maxNumber + 1) + minNumber);
$(this).html(randomnumber);
});
}
getNumber();
.container {
width: 200px;
height: 260px;
float: left;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.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: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>

To limit the number of cards which can be flipped, add a condition to the click handler which checks how many cards there are with the class flipped. If two already exist then you can disallow any further clicks from having an effect.
Also note that you don't need the each() loop to add a click() handler to multiple elements. Similarly you don't need a loop to set the html(), just provide a function which returns the value to set. Try this:
$('.front').html('dd');
$('.card').on("click", function() {
if ($('.flipped').length < 2) {
$(this).addClass("flipped");
} else {
console.log('You already flipped two cards!');
}
});
function getNumber() {
var minNumber = 0;
var maxNumber = 2;
$('.card .back').html(function() {
return Math.floor(Math.random() * (maxNumber + 1) + minNumber);
});
}
getNumber();
.container {
width: 200px;
height: 260px;
float: left;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.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: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>

Multiple Card Flip jQuery

I'm looking to have multiple cards flip individually, but I'm not that well versed in jQuery/JS and I'm having issues with figuring out the code, and could use a little help. Also, the tiles aren't flipping back over when clicked.
$('.js-click').on('click', function() {
$('.card').not(this).removeClass('flipped');
$('.card').toggleClass('flipped');
});
$('.js-click1').on('click', function() {
$('.card').not(this).removeClass('flipped');
$('.card').toggleClass('flipped');
});
.flipContainer {
width: 260px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.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: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 200px;
color: white;
text-align: center;
font-weight: bold;
font-size: 12px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
<section class="flipContainer">
<div class="card">
<button class="js-click1">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>

Looks like the issue came from trying to find the appropriate .card element (looks like it was finding both of them) and then removing a class + toggling a class will always add it:
remove .flipped
toggle .flipped
.flipped is always added
so you'll never turn your cards back over.
Quick fix, look for the clicked element's parent() and target that...
$('.js-click').on('click', function() {
$(this).parent('.card').toggleClass('flipped');
});
.flipContainer {
width: 260px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.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: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 200px;
color: white;
text-align: center;
font-weight: bold;
font-size: 12px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>

First you'll want to give both cards the class of js-click so that you can target both of them with the same $('.js-click') selector. Then as you want to flip the target's .card, all you have to do is toggle the class flipped on $(this).parent().
This can be seen in the following:
$('.js-click').on('click', function() {
$(this).parent().toggleClass('flipped');
});
.flipContainer {
width: 260px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.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: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 200px;
color: white;
text-align: center;
font-weight: bold;
font-size: 12px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>

You are toggling the flipped class on all elements with .card what you need it to do it just for the associated elements like
$(this).closest('.card').toggleClass('flipped');
Moreover, you can reduce your code by assigning js-click class to both buttons
Here is snippet
$('.js-click').on('click', function() {
$(this).closest('.card').toggleClass('flipped');
});
.flipContainer {
width: 260px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.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: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 200px;
color: white;
text-align: center;
font-weight: bold;
font-size: 12px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>

Divs are not flipping on IE

Pre-story: I am using CSS and jQuery to create a flipping effect.
How I am achieving it: For that purpose I am using preserve-3d.
Good news: It works all fine on all major browsers
Problem: It does not work in IE.
Solution approach: Initially I thought it is not applying the preserve but then I think it is just not firing the back element.
Help: Can you please help, link to my JSFiddle
function flip() {
$('.card').toggleClass('flipped');
}
.container {
width: 200px;
height: 260px;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.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: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="flip()">flip the card</button>
<section class="container">
<div class="card" onclick="flip()">
<div class="front">1</div>
<div class="back">2</div>
</div>
</section>

As described in the remarks it's a compatibility issue with IE.
I suggest a simple workaround, hoping it could help:
var ua = window.navigator.userAgent;
var msie = (ua.indexOf("MSIE ") > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) ? true : false;
var i = 0;
function flip() {
$('.card').toggleClass('flipped')
if (msie) {
// the timeout happens after 400ms because on my computer this create the right effect
i = (i + 1) % 2;
setTimeout(function (i) {
$('.card > div:eq(' + i + ')').css('backface-visibility', 'visible');
$('.card > div:not(:eq(' + i + '))').css('backface-visibility', 'hidden');
}, 400, i);
}
}
.container {
width: 200px;
height: 260px;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.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: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<button onclick="flip()">flip the card</button>
<section class="container">
<div class="card" onclick="flip()">
<div class="front">1</div>
<div class="back">2</div>
</div>
</section>

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);
}