Skip to content

Instantly share code, notes, and snippets.

@daigofuji

daigofuji/simple-3d-card-flip.html

Last active December 18, 2015 12:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save daigofuji/5783057 to your computer and use it in GitHub Desktop.
Save daigofuji/5783057 to your computer and use it in GitHub Desktop.
Download ZIP
Simple 3d card flip
Raw
simple-3d-card-flip.html
<!DOCTYPE html>
<html>
<head>
<title>simple3d</title>
<style type="text/css" title="text/css">
.sandbox-wrap {
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
#card-flip-3d {
width: 200px;
height: 260px;
position: relative;
-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;
}
#card-flip-3d.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
#card-flip-3d .card {
display: block;
height: 100%;
width: 100%;
position: absolute;
top:0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
#card-flip-3d .front {
background: #8bad93;
}
#card-flip-3d .back {
background: #8ea8cb;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
</style>
</head>
<body>
<div class="sandbox-wrap">
<div id="card-flip-3d" class="">
<div class="card front"></div>
<div class="card back"></div>
</div>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#card-flip-3d").click(function () {
$(this).toggleClass("flipped");
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment