Develop Reference

The flipping cards on click function doesn't work on mobile

Its simply a 9 card game which you have to get 3 aces to win, i am using a click event listener to flip the cards and then comparing them together, it works fine on pc while on mobile the cards donot flip.
Here is the code.
https://codepen.io/ahmedroushdi/pen/JjZQEwJ
The images doesnot show up on codepen because they are saved on pc but the cards is flipped.
Well, I have tried another way to flip the cards in the old version i just change the image but now i have positioned them on top of each other and when you click on the card where its backface is hidden the other card "face" shows up and i have adjusted the -webkit- transform for it and no result also i have added another event listener for the touch effect on mobile phones and it didn't make any difference so i don't have any other solutions.
var cards = document.querySelectorAll(".card-toFlip");
let cardOne, cardTwo, cardThree;
function flipCard(e) {
let clickedCard = e.path[1];
if (clickedCard != cardOne) {
clickedCard.classList.add('is-flipped');
if (!cardOne) {
cardOne = clickedCard;
let cardOneImg = cardOne.querySelector('.card-front').getAttribute('alt');
if (cardOneImg != "ace") {
setTimeout(() => {
cardOne.classList.toggle('vibration');
}, 1000);
setTimeout(() => {
cardOne.classList.remove('is-flipped');
}, 3000);
}
return
}
if (!cardTwo) {
cardTwo = clickedCard;
let cardOneImg = cardOne.querySelector('.card-front').getAttribute('alt');
let cardTwoImg = cardTwo.querySelector('.card-front').getAttribute('alt');
if (cardOneImg === "ace" && cardTwoImg != "ace") {
setTimeout(() => {
cardOne.classList.add('vibration');
cardTwo.classList.add('vibration');
}, 1000);
setTimeout(() => {
cardOne.classList.remove('is-flipped');
cardTwo.classList.remove('is-flipped');
}, 3000);
}
return
}
cardThree = clickedCard;
let cardOneImg = cardOne.querySelector('.card-front').getAttribute('alt');
let cardTwoImg = cardTwo.querySelector('.card-front').getAttribute('alt');
let cardThreeImg = cardThree.querySelector('.card-front').getAttribute('alt');
matchCards(cardOneImg, cardTwoImg, cardThreeImg);
}
};
cards.forEach(card => {
card.addEventListener('click', flipCard);
});
cards.forEach(card => {
card.addEventListener('touchstart', flipCard);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: radial-gradient(circle at 10% 20%, rgb(0, 0, 0) 0%, rgb(64, 64, 64) 90.2%);
}
header {
color: #fff;
text-align: center;
}
.headline {
font-size: 5vw;
margin-top: 5vw;
}
header p {
padding-top: 1vw;
}
.sub-text {
font-size: 1.5vw;
}
.cards-background {
margin-top: 6vw;
display: flex;
flex-direction: row;
justify-content: center;
perspective: 1000px;
-webkit-perspective: 1000px;
position: relative;
}
.card-toFlip {
transform-style: preserve-3d;
transition: all 0.8s ease;
text-align: center;
height: 100%;
width: 100%;
}
.card-toFlip .card-back {
position: absolute;
left: 3%;
margin: 0vw 0.5vw;
border-radius: 0.5vw;
width: 130px;
height: 190px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.card-toFlip.is-flipped {
transform: rotateY(180deg);
animation: normal 0.5s ease;
}
.card-toFlip .card-front {
position: absolute;
border-radius: 0.5vw;
transform: rotateY(180deg);
left: 3%;
margin: 0vw 0.5vw;
width: 130px;
height: 190px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.cards-background img:hover {
box-shadow: 3px 3px 3px grey;
cursor: pointer;
}
.card-toFlip.is-flipped.vibration {
animation: vibration 0.4s ease-in-out;
transform: rotateY(0deg);
}
#keyframes vibration {
0%,
100% {
transform: translateX(0);
-webkit-transform: translate3d(0, 0, 0);
}
20% {
transform: translateX(-13px);
-webkit-transform: translate3d(-13px, 0, 0);
}
40% {
transform: translateX(13px);
-webkit-transform: translate3d(13px, 0, 0);
}
60% {
transform: translateX(-8px);
-webkit-transform: translate3d(-8px, 0, 0);
}
80% {
transform: translateX(8px);
-webkit-transform: translate3d(8px, 0, 0);
}
}
#media (min-width:992px) and (max-width:1199px) {
.headline {
margin: 10vw 3vw 0vw;
}
.cards-background {
justify-content: center;
perspective: 1000px;
display: flex;
flex-wrap: wrap;
margin: 13vw 2vw 2vw 2vw;
}
.card-toFlip {
width: 19%;
}
.card-toFlip .card-front {
width: 130px;
height: 190px;
left: 15%;
}
.card-toFlip .card-back {
width: 130px;
height: 190px;
position: static;
margin-bottom: 11vw;
}
}
#media (min-width:768px) and (max-width:991px) {
.headline {
margin: 10vw 3vw 0vw;
font-size: 7vw;
}
header p {
margin: 0.5vw;
}
.sub-text {
font-size: 3vw;
}
.cards-background {
justify-content: center;
perspective: 1000px;
display: flex;
flex-wrap: wrap;
margin: 13vw 2vw 2vw 2vw;
}
.card-toFlip {
width: 30%;
transition: transform 0.5s;
transform-style: none;
}
.card-toFlip .card-front {
width: 130px;
height: 190px;
left: 25%;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.card-toFlip .card-back {
width: 130px;
height: 190px;
position: static;
margin-bottom: 11vw;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
}
#media (max-width:767px) {
.headline {
margin: 10vw 3vw 0vw;
}
.sub-text {
font-size: 2vw;
}
.cards-background {
justify-content: center;
perspective: 1000px;
display: flex;
flex-wrap: wrap;
margin: 8vw 2vw 2vw 2vw;
}
.card-toFlip {
width: 30%;
transition: transform 0.8s;
transform-style: none;
}
.card-toFlip .card-front {
width: 130px;
height: 190px;
left: 25%;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.card-toFlip .card-back {
width: 130px;
height: 190px;
position: static;
margin-bottom: 5vw;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
}
<main style="height:100vh">
<div class="cards-background">
<div class="card1 card-toFlip" id="card">
<img src="images/back.png" class="card-back" id="card-back">
<img src="images/2_of_clubs.png" class="card-front" id="card-number" alt="2">
</div>
<div class="card2 card-toFlip" id="card">
<img src="images/back.png" class="card-back">
<img src="images/ace_of_clubs.png" class="card-front" id="card-number" alt="ace">
</div>
<div class="card3 card-toFlip" id="card">
<img src="images/back.png" class="card-back" id="card-back">
<img src="images/3_of_clubs.png" class="card-front" id="card-number" alt="3">
</div>
<div class="card4 card-toFlip" id="card">
<img src="images/back.png" class="card-back" id="card-back">
<img src="images/4_of_clubs.png" class="card-front" id="card-number" alt="4">
</div>
<div class="card5 card-toFlip" id="card">
<img src="images/back.png" class="card-back" id="card-back">
<img src="images/ace_of_clubs.png" class="card-front" id="card-number" alt="ace">
</div>
<div class="card6 card-toFlip" id="card">
<img src="images/back.png" class="card-back" id="card-back">
<img src="images/5_of_clubs.png" class="card-front" id="card-number" alt="5">
</div>
<div class="card7 card-toFlip" id="card">
<img src="images/back.png" class="card-back" id="card-back">
<img src="images/6_of_clubs.png" class="card-front" id="card-number" alt="6">
</div>
<div class="card8 card-toFlip" id="card">
<img src="images/back.png" class="card-back" id="card-back">
<img src="images/7_of_clubs.png" class="card-front" id="card-number" alt="7">
</div>
<div class="card9 card-toFlip" id="card">
<img src="images/back.png" class="card-back" id="card-back">
<img src="images/ace_of_clubs.png" class="card-front" id="card-number" alt="ace">
</div>
</div>
</main>

It was a tough one to read but if I'm gonna guess, I'd say your error comes from this rule:
.card-toFlip .card-front {
width: 130px;
height: 190px;
left: 25%;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
under the #media (max-width:767px) media query.
The fact that you said max-width 767px means that style will affect all devices between 767px and 0 (if it's possible to have devices with 0 width). Meaning this style will affect mobile devices as well, since most of their widths fall below 767px.
Now, because the styles in that media query will take precedence over all the previously defined styles, the card front would always be flipped 180deg even though you add the is-flipped class. I hope it makes sense.

how to make CSS transition when Item is clicked? [duplicate]

This question already has answers here:
Flip content of a div on clicking a button
(4 answers)
Closed 2 years ago.
I have created a pen here(https://codepen.io/rupamkairi/pen/ExjJRMo?editors=1100) on codepen. The card is made to rotate(specifically to Flip) when hovered on the element. I want it to be flip when I click on the element(.card).
.card {
margin: auto;
width: 5em;
height: 8em;
background-color: transparent;
perspective: 250px;
}
.card-content {
position: relative;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
transition: transform 0.5s;
transform-style: preserve-3d;
}
.card:hover .card-content {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.card-back {
border-radius: 5px;
background-color: white;
transform: rotateY(180deg);
}
<div class="card">
<div class="card-content">
<div class="card-front">
<h1>🎆</h1>
</div>
<div class="card-back">
<h1>🍕</h1>
</div>
</div>
</div>
I tried using :active pseudo-class but in that case I need to hold the card to keep it fliped.
Is there any way to use css animation with javascript?
I want to make multiple cards on a single page, and make them flip when clicked.

If you want the card to toggle the flip on every click try this:
const card = document.querySelector(".card");
const cardContent = document.querySelector(".card-content");
let flipped = false;
card.addEventListener("click", () => {
if(!flipped) {
cardContent.style.transform = "rotateY(180deg)"
} else {
cardContent.style.transform = "rotateY(0deg)"
}
flipped = !flipped;
});
Or if you want the card to be flipped only once try this:
const card = document.querySelector(".card");
const cardContent = document.querySelector(".card-content");
card.addEventListener("click", () => {
cardContent.style.transform = "rotateY(180deg)";
});
As it's implemented through JavaScript remove .card:hover .card-content { transform: rotateY(180deg);} from stylesheet.

Initially add the id to the div tag where class = "card" like
HTML
<div class="card" id ="card1">
<div class="card-content">
<div class="card-front">
<h1>🎆</h1>
</div>
<div class="card-back">
<h1>🍕</h1>
</div>
</div>
</div>
Here you set the id as card1 and then you must you the following simple JS like
<script>
document.getElementById("card1").onclick = function(){
document.getElementById("card1").style.transform = rotateY(180deg);
}
</script>
This is a simple way by which you can achieve what you want.

just change .card:hover .card-content
to .card.flip .card-content
and add js code:
const card = document.querySelector('.card')
card.onclick=_=>card.classList.add('flip');
card.onmouseout=_=>card.classList.remove('flip');
demo:
const card = document.querySelector('.card')
card.onclick=_=>card.classList.add('flip');
card.onmouseout=_=>card.classList.remove('flip');
html,
body {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Roboto", sans-serif;
background-color: #96cfe1;
}
.container {
padding: 10%;
}
.card {
margin: auto;
width: 5em;
height: 8em;
background-color: transparent;
perspective: 250px;
}
.card-content {
position: relative;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px #00000080;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.card.flip .card-content {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.card-back {
border-radius: 5px;
background-color: white;
transform: rotateY(180deg);
}
<div class="container">
<div class="card">
<div class="card-content">
<div class="card-front">
<h1>🎆</h1>
</div>
<div class="card-back">
<h1>🍕</h1>
</div>
</div>
</div>
</div>

Jquery Flip Card Troubleshooting

I'm trying to create multiple flip cards with HTML and CSS, that flip using jQuery. The problem I'm running into is that currently I'm only able to flip the very first card.
Any advice to make the jQuery more global and able to click/flip each card would be greatly appreciated.
Here's the example I've been using: https://codepen.io/marcwilk/pen/JjdwKZR
HTML:
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<p>Click card to flip.</p>
CSS:
body { font-family: sans-serif; }
.scene {
width: 200px;
height: 260px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 1s;
}
.card.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateY(180deg);
}
JS:
var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
Thanks!

Firstly, your code is pure JavaScript, and not using jQuery.
Second, the problem is that you use document.querySelector('.card') which selects the first .card element.
Your solution is to use document.querySelectorAll('.card'); and loop through it to add the click event listener:
var cards = document.querySelectorAll('.card');
cards.forEach(card => {
card.addEventListener('click', function() {
card.classList.toggle('is-flipped');
})
})
body {
font-family: sans-serif;
}
.scene {
width: 200px;
height: 260px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 1s;
}
.card.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateY(180deg);
}
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<p>Click card to flip.</p>

making a toggle button to change panels

I have two panels at the top of my application and one button at the button. By default only panel one must be visible, but by clicking on the button panel one fades away, and panel two fades in. I created the layout, but I do not know how to achieve it.
$(".panel2").hide();
$(document).ready(function() {
$(".grid-button").on("click", function() {
$(".grid").toggleClass("open close");
});
});
div.app {
margin:50px auto;
width: 400px;
height: 400px;
border-radius:10px;
overflow: hidden;
position: relative;
}
div.app > .blur {
width: 100%;
height: 100%;
background: url(http://goo.gl/0VTd9W);
-webkit-filter: blur(5px);
}
div.mainSection, div.dashboard{
position: absolute;
left: 0px;
text-align:center;
color:#fff;
font-size:20px;
}
div.mainSection{
width:100%;
height:85%;
background:rgba(0,0,0,0.5);
top:0;
}
div.dashboard{
width:100%;
height:15%;
background:rgba(255,0,0,0.5);
bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2 {
width: 100%;
Height: 100%;
Background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
top: 0px;
}
.grid-button {
background: none;
border: none;
padding: 3px;
width: 100%;
}
.grid {
display: inline-block;
height: 4px;
position: relative;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid:after, .grid:before {
content: '';
position: absolute;
background-color: #FFF;
display: inline-block;
height: 4px;
left: 0;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid.open {
background-color: #FFF;
}
.grid.open:after {
top: 10px;
}
.grid.open:before {
top: -10px;
}
.grid.close {
background-color: transparent;
transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
top: 0;
transform-origin: 50% 50%;
}
.grid.close:before {
transform: rotate(135deg);
}
.grid.close:after {
transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
<div class="blur"></div>
<div class="mainSection">
<div class="panel1">Panel1</div>
<div class="panel2">Panel2</div>
</div>
<div class="dashboard">
<div class="grid-button">
<span class="grid open"></span>
</div>
</div>
</div>
First of all since I did $('.panel2').hide();, in page load first it loads the panel then hides it. How can I make it invisible from the beginning?
Secondly how can I make the panel2 visible only by pressing the button?
And finally is there anyway to add some transitions effects for changing panels?

You may try:
$(".grid-button").on("click", function() {
var visibleObj = $('.mainSection div:visible');
var inVisibleObj = $('.mainSection div:hidden');
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
});
});
While for the visibility you need:
<div class="panel2" style="display: none;">Panel2</div&gt
The running snippet:
$(function () {
$(".grid-button").on("click", function() {
var visibleObj = $('.mainSection div:visible');
var inVisibleObj = $('.mainSection div:hidden');
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
});
});
});
div.app {
margin:50px auto;
width: 400px;
height: 400px;
border-radius:10px;
overflow: hidden;
position: relative;
}
div.app > .blur {
width: 100%;
height: 100%;
background: url(http://goo.gl/0VTd9W);
-webkit-filter: blur(5px);
}
div.mainSection, div.dashboard{
position: absolute;
left: 0px;
text-align:center;
color:#fff;
font-size:20px;
}
div.mainSection{
width:100%;
height:85%;
background:rgba(0,0,0,0.5);
top:0;
}
div.dashboard{
width:100%;
height:15%;
background:rgba(255,0,0,0.5);
bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2 {
width: 100%;
Height: 100%;
Background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
top: 0px;
}
.grid-button {
background: none;
border: none;
padding: 3px;
width: 100%;
}
.grid {
display: inline-block;
height: 4px;
position: relative;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid:after, .grid:before {
content: '';
position: absolute;
background-color: #FFF;
display: inline-block;
height: 4px;
left: 0;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid.open {
background-color: #FFF;
}
.grid.open:after {
top: 10px;
}
.grid.open:before {
top: -10px;
}
.grid.close {
background-color: transparent;
transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
top: 0;
transform-origin: 50% 50%;
}
.grid.close:before {
transform: rotate(135deg);
}
.grid.close:after {
transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
<div class="blur"></div>
<div class="mainSection">
<div class="panel1">Panel1</div>
<div class="panel2" style="display: none;">Panel2</div>
</div>
<div class="dashboard">
<div class="grid-button">
<span class="grid open"></span>
</div>
</div>
</div>

To make one of the panels hidden in the first place, I'd use a css class called hidden:
.hidden{
display : none;
}
Which simply makes what it sounds like, hiding the element.
Than, I'd set this class in the HTML decleration:
<div class="panel2 hidden">Panel2</div>
That will hide panel2 on page load, and by that you don't have to hide it using js code.
Than, I'd use a helper css class called panel that stands to be a panel identifier (you can either use the data attribute, or any other way of identifying those elements).
For 5 panels, it would look like this:
<div class="panel panel1">Panel1</div>
<div class="panel panel2 hidden">Panel2</div>
<div class="panel panel3 hidden">Panel3</div>
<div class="panel panel4 hidden">Panel4</div>
<div class="panel panel5 hidden">Pane5</div>
At last, to make this work for any number of panels you want (not necesseraly 2), I'd use a "carousel" effect to toggle the panels visibility, while having a way to keep track with them (adding and removing the hidden class), and use the fadeIn/fadeOut effect. (again, instead of identifying the panels using the panel1,panel2,panel3... classes, you can always use the data attribute (please read more about it in jQuery docs), or in any other way).
var currentPanel = 1;
$(".grid-button").on("click", function() {
$(".grid").toggleClass("open close");
$(".panel"+currentPanel).fadeOut("normal", function(){
$(this).addClass('hidden');
});
currentPanel = currentPanel >= $(".panel").length ? 1 : currentPanel+1;
$(".panel"+currentPanel).fadeIn().removeClass('hidden');
});
Just note that the hidden class actually "looses" it's functionality after the first click, since jQuery changes the display property inline, but I think that it might not be harmful to keep them anyway (it will be easier to track them).
You can see an example here: https://jsfiddle.net/j79y5kdb/3/

AngularJS animation card flip

I am trying to use the new AngularJS way of doing animations between page transitions and would like to incorporate a card flip (like http://jsfiddle.net/nicooprat/GDdtS/)
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flip .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 200px;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
I am just a bit unsure how to update that code to make it work with AngularJS for a page transition.
Any thoughts?

I realize this was a long time ago, but I was just doing this, and it took zero javascript. The key is ng-class. Here is a JSFIDDLE.
The key is this line
<div class="card" ng-class="{'flipped':isFlipped}" ng-click="isFlipped=!isFlipped">
It will assign the class 'flipped' to the card when $scope.isFlipped is true. Here is a little NFL flash cards game I put together for fun. Check out the source code (which isn't super pretty), it should be helpful if you are doing something like this.
NFL Flash Cards

Here is an alternate solution where it's more clear from the html what's happening. Specifically, the flip mechanism is in angularjs rather than buried in css magic. Perhaps easier to follow for anyone who's not a css expert:
<div class="card" ng-click="isFlipped=!isFlipped">
<div class="face front" ng-class="{'flipped':isFlipped}">
Front
</div>
<div class="face back" ng-class="{'flipped':!isFlipped}">
Back
</div>
</div>