Skip to content

Instantly share code, notes, and snippets.

@jorgeramirez

jorgeramirez/folding-css3.html

Created March 22, 2014 13:54
Show Gist options
  • Save jorgeramirez/9707480 to your computer and use it in GitHub Desktop.
Save jorgeramirez/9707480 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Folding effect
Raw
folding-css3.html
<!DOCTYPE HTML>
<!-- based on: http://davidwalsh.name/folding-animation -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Folding Effect</title>
<link href='http://fonts.googleapis.com/css?family=Unkempt' rel='stylesheet' type='text/css'>
<style>
.container {
height: 275px;
width: 475px;
position: relative;
border: 1px solid #888;
background: url(grumpy-cat.jpg) 0 0 no-repeat;
box-shadow: 1px 1px 5px rgba(0,0,0, 0.6);
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0, 0.6);
-moz-box-shadow: 1px 1px 5px rgba(0,0,0, 0.6);
}
.fold-outer {
/* animation container */
height: 0;
overflow: hidden;
transition: height 1s;
-webkit-transition: height 1s;
-moz-transition: height 1s;
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
.fold-inner {
/* folded block */
height: 50px;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform-origin: top;
-webkit-transform-origin: top;
-moz-transform-origin: top;
}
.container:hover .fold-outer {
height: 100px;
}
.container:hover .fold-inner {
height: 100px;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
}
.content {
background: rgba(0,0,0,0.5);
color: white;
height: 100px;
line-height: 100px;
text-align: center;
font-family: 'Unkempt', cursive;
font-size: 3em;
}
body > p {
position: relative;
float: right;
left: -30%;
font-size: 16px;
line-height: 275px;
text-align: center;
}
</style>
</head>
<body>
<p>
Hover over <strong>grumpy cat</strong> to see the effect!
</p>
<div class="container">
<div class="fold-outer">
<div class="fold-inner">
<!-- content for animation goes here -->
<div class="content">
<strong>Hate</strong> you!
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment