Skip to content

Instantly share code, notes, and snippets.

@huandu

huandu/flip_cards.html

Created December 19, 2012 03:43
Show Gist options
  • Save huandu/4334224 to your computer and use it in GitHub Desktop.
Save huandu/4334224 to your computer and use it in GitHub Desktop.
Download ZIP
A flip card demo for Chrome and Safari.
Raw
flip_cards.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test Flip Cards Performance</title>
<link rel="stylesheet" href="cards.css" />
<style type="text/css">
body { background: #000; padding-top: 200px; font-family: Helvetica; }
#scene { background: url(body.jpg) no-repeat; margin: auto; text-align: center; width: 640px; height: 350px; padding: 50px; }
.card { text-align: left; float: left; color: #000; margin: 0 11px 5px 0; position: relative; -webkit-perspective: 120px; }
.card * { width: 44px; height: 64px; background: url(game.png) no-repeat -10px -560px; -webkit-transform-style: preserve-3d; }
.card * { font-size:24px; padding: 3px 0 0 3px; text-transform: uppercase; }
.card .back { position: absolute; top: 0; left: 0; }
.card .spade { background-position: -65px -560px; }
.card .heart { background-position: -120px -560px; color: #C60000; }
.card .club { background-position: -175px -560px; }
.card .diamond { background-position: -230px -560px; color: #C60000; }
.flip, .flip-back { -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-backface-visibility: hidden; }
.flip { -webkit-animation-name: flip; }
.flip-back { -webkit-animation-name: flip-back; }
@-webkit-keyframes flip {
0% { -webkit-transform: rotateY(0deg); -webkit-animation-timing-function: ease-in-out; }
50% { -webkit-transform: rotateY(180deg); -webkit-animation-timing-function: ease-in-out; }
100% { -webkit-transform: rotateY(360deg); }
}
@-webkit-keyframes flip-back {
0% { -webkit-transform: rotateY(-180deg); -webkit-animation-timing-function: ease-in-out; }
50% { -webkit-transform: rotateY(0deg); -webkit-animation-timing-function: ease-in-out; }
100% { -webkit-transform: rotateY(180deg); }
}
</style>
</head>
<body>
<div id="scene"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript">
$(function() {
var cards = ['3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'],
types = ['spade', 'heart', 'club', 'diamond'],
$scene = $('#scene');
for (var i = 0; i < types.length; i++) {
for (var j = 0; j < cards.length; j++) {
$scene.append('<div class="card"><div class="back"></div><div class="' + types[i] + '">' + cards[j] + '</div></div>')
}
}
$('.card').click(function(e) {
var $this = $(this);
$('.back', $this).toggleClass('flip-back');
$('.spade, .heart, .club, .diamond', $this).toggleClass('flip');
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment