Skip to content

Instantly share code, notes, and snippets.

@maxparm

maxparm/fold.html

Created May 23, 2012 00:17
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save maxparm/2772486 to your computer and use it in GitHub Desktop.
Save maxparm/2772486 to your computer and use it in GitHub Desktop.
Download ZIP
CSS - 3D Accordion/Paper Fold Effect
Raw
fold.html
<!doctype html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Css3 Fold Effect</title>
<!-- Style -->
<style type="text/css">
body {
padding:20px;
}
a {
cursor:pointer;
}
ul {
list-style:none;
padding:0;
margin:20px;
height:150px;
}
li {
display:block;
float:left;
padding:0;
margin:0;
}
li span {
display:block;
height:75px;
}
li.li1 span {
background:red;
}
li.li2 span {
background:blue;
}
li.li3 span {
background:green;
}
li.li4 span {
background:orange;
}
li.li5 span {
background:purple;
}
li.li6 span {
background:grey;
}
li span.start1 {
margin-right:-25px;
width:0px;
-webkit-transform:perspective(0) rotateY(90deg);
-webkit-transition:all 1.5s ease-in;
}
li span.start2 {
margin-right:-25px;
width:0px;
-webkit-transform:perspective(0) rotateY(-90deg);
-webkit-transition:all 1.5s ease-in;
}
li span.end1 {
margin-right:0px;
width:75px;
-webkit-transform:perspective(200px) rotateY(0deg);
-webkit-transition:all 1.5s ease-in;
}
li span.end2 {
width:75px;
margin-right:0px;
-webkit-transform:perspective(200px) rotateY(0deg);
-webkit-transition:all 1.5s ease-in;
}
</style>
<!-- Javascript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var fold = true;
$('#fold').click(function(){
$('ul li span').each(function(i, that) {
if(fold) {
if(i%2==0) {
$(that).addClass('end1');
} else {
$(that).addClass('end2');
}
} else {
if(i%2==0) {
$(that).addClass('start1');
} else {
$(that).addClass('start2');
}
}
});
if(fold) {
$('ul li span').removeClass('start1').removeClass('start2');
$(this).html('fold');
} else {
$('ul li span').removeClass('end1').removeClass('end2');
$(this).html('unfold');
}
fold = !fold;
});
});
</script>
</head>
<body>
<ul>
<li class="li1"><span class="start1">1</span></li>
<li class="li2"><span class="start2">1</span></li>
<li class="li3"><span class="start1">1</span></li>
<li class="li4"><span class="start2">1</span></li>
<li class="li5"><span class="start1">1</span></li>
<li class="li6"><span class="start2">1</span></li>
</ul>
<p><a id="fold">unfold</a></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment