Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple 3d card flip
<!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
You can’t perform that action at this time.