Skip to content

Instantly share code, notes, and snippets.

@iamvdo

iamvdo/dabblet.css

Created October 4, 2012 08:27
Show Gist options
  • Save iamvdo/3832204 to your computer and use it in GitHub Desktop.
Save iamvdo/3832204 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
http://codepen.io/anon/pen/KjhJt
*/
*{margin:0;padding:0;}
html{
height:450px;
background:linear-gradient(#9162D8,#382A99) no-repeat;
font:.8em sans-serif;
color:#111;
color:#eee;
text-shadow:0 -1px 0 rgba(0,0,0,.7);
}
body > div{
margin:100px auto;
width:500px;height:160px;
perspective:500px;
perspective-origin:50% 80px;
}
body > div div{
background-color:#111;
background-image:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,0));
width:100px;height:165px;
list-style:none;text-align:center;
/*display:table-cell;*/
display:inline-block;
transform-origin:50% 50%;
transform:rotateY(45deg);
transition: all .5s;
box-shadow:0 1px 0 rgba(255,255,255,.4) inset,
-5px 0px 5px -5px rgba(0,0,0,.8);
}
body > div:hover div{
transform:rotateY(0deg);
}
Raw
dabblet.html
<div>
<div></div><div></div><div></div><div></div>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment