Skip to content

Instantly share code, notes, and snippets.

@WebInspectInc
Created February 19, 2012 21:29
Show Gist options
  • Save WebInspectInc/1865891 to your computer and use it in GitHub Desktop.
Save WebInspectInc/1865891 to your computer and use it in GitHub Desktop.
Page flipper
/**
* Page flipper
*/
* {
box-sizing:border-box;
}
.pages {
position:relative;
width:30%; height:250px;
}
.pages > div {
transition:all 1s linear;
position:absolute;
right:0;
padding:30px;
background:#C0C0F0;
width:50%;height:100%;
}
.pages > .cover {
z-index:100;
background:#C0F0C0;
font-size:3em;text-align:center;
}
.pages > .page:nth-child(2) {
z-index:110;
background:grey;
transform:rotate(-20deg) translateX(100%);
transform-origin:center right;
}
.pages:hover > .cover {
margin-right:50%;
}
.pages:hover > .page:nth-child(2) {
transform: rotate(0) translateX(-100%);
}
<div class="pages">
<div class="cover">Menu</div>
<div class="page">Blaa</div>
<div class="page">Tlaa</div>
</div>
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment