Skip to content

Instantly share code, notes, and snippets.

@kulor

kulor/flip.html

Created April 24, 2012 14:16
Show Gist options
  • Save kulor/2480039 to your computer and use it in GitHub Desktop.
Save kulor/2480039 to your computer and use it in GitHub Desktop.
Download ZIP
CSS 3d Flip experiment
Raw
flip.html
<!doctype html>
<html lang="en-us" dir="ltr" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Flip Experiment</title>
<style type="text/css">
.panel {
float: left;
width: 300px;
height: 300px;
margin: 20px;
position: relative;
font-size: .8em;
-webkit-perspective: 600px;
-moz-perspective: 600px;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.panel .front {
-webkit-transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.panel .front,
.panel .back
{
padding:10px;
position: absolute;
top: 0;
left: 0;
width:100%;
border: 1px solid #ccc;
}
.panel .back {
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.panel:hover .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.panel:hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
}
</style>
</head>
<body>
<h1>CSS Flip Experiment</h1>
<div class="hover panel">
<div class="front">
<h2>Front side.</h2>
<p>Mouse Over Me!</p>
</div>
<div class="back">
<div class="pad">
<h2>Back side</h2>
<p>Ohh err!</p>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment