Skip to content

Instantly share code, notes, and snippets.

@superhero

superhero/flipper.html

Last active December 21, 2015 20:59
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save superhero/6365071 to your computer and use it in GitHub Desktop.
Save superhero/6365071 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flipper.html
<!DOCTYPE html>
<html dir="ltr" lang="sv-SE">
<head>
<title>Flipper</title>
<meta charset="utf-8">
<style>
.thumb
{
display:block;
width:200px;
height:140px;
position:relative;
margin-bottom:20px;
margin-right:20px;
float:left;
}
.thumb-wrapper
{
display:block;
width:100%;
height:100%;
}
.thumb .thumb-front
{
width:100%;
height:100%;
position:absolute;
display:block;
background:#ff0;
}
.thumb .thumb-back
{
width:100%;
height:100%;
position:absolute;
display:block;
background:#f00;
}
/* Flipp effect */
.thumb.flip
{
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.thumb.flip .thumb-wrapper
{
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-ms-transition: -moz-transform 1s;
-o-transition: -moz-transform 1s;
transition: -moz-transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.thumb.flip .thumb-front,
.thumb.flip .thumb-back
{
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.thumb.flip .thumb-wrapper.flipper,
.thumb.flip .thumb-back
{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
</style>
</head>
<body>
<div class="thumb flip">
<div class="thumb-wrapper">
<div class="thumb-front">
Foobar
</div>
<div class="thumb-back">
Baz
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function ()
{
// add/remove flip class that make the transition effect
$('.thumb.flip').hover(
function ()
{
$(this).find('.thumb-wrapper').addClass('flipper');
},
function ()
{
$(this).find('.thumb-wrapper').removeClass('flipper');
}
);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment