Skip to content

Instantly share code, notes, and snippets.

@juice49

juice49/dabblet.css

Created September 14, 2012 13:36
Show Gist options
  • Save juice49/3721955 to your computer and use it in GitHub Desktop.
Save juice49/3721955 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
body {
font-family:sans-serif;
}
#wrapper {
height:0;
overflow:hidden;
background:#ccc;
transition:height 2s;
}
#wrapper.active {
height:280px;
}
#wrapper section {
width:200px;
height:140px;
padding:10px;
color:#fff;
background:#F55617;
transition:transform 2s;
transform-origin:center top;
transform:rotate3d(1,0,0,90deg);
}
#wrapper section:last-child {
background:#1682F5;
transform-origin:center bottom;
}
#wrapper.active section {
transform:rotate3d(1,0,0,0deg);
}
Raw
dabblet.html
<body>
<div id="wrapper" class="active">
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fringilla, massa nec rhoncus ornare, odio tortor elementum mauris, a aliquam massa ligula ut magna.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fringilla, massa nec rhoncus ornare, odio tortor elementum mauris, a aliquam massa ligula ut magna.</p>
</section>
</div>
</body>
Raw
settings.json
{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment