Skip to content

Instantly share code, notes, and snippets.

/gist:5081539

Created March 4, 2013 10: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 anonymous/5081539 to your computer and use it in GitHub Desktop.
Save anonymous/5081539 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta content='text/html; charset=utf-8' http-equiv='content-type'>
<title>Transform Example</title>
<style type="text/css">
.effect .flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}
.effect .flip-container:hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.effect .flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
}
.effect .front, .effect .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.effect .back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container {
position: absolute;
top: 50px;
left: 50px;
bottom: 50px;
width: 320px;
background-color: yellow;
border: 1px solid #ccc;
}
.front, .back {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 320px;
}
.front {
background: lightgreen;
z-index: 2;
}
.back {
background: lightblue;
}
.name {
font-size: 2em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 60px;
left: 25%;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div id="container" class="x-effect">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<span class="name">front</span>
</div>
<div class="back">
<span class="name">back</span>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment