Untitled

dabblet.css

body {
	perspective: 300px;
}
#logo {
   display: block;
   margin: 150px auto 0;
   width: 128px;
   height: 128px;
   padding-top: 20px;
	transform-origin: 50% 80px;
}

#logo > div {
    opacity: 1;
    width: 100%;
    height: 33.333%;
    background: transparent url(http://a2.twimg.com/profile_images/1296150742/hv_twitter_reasonably_small.png) no-repeat;
}

#logo > div.c1 {
    background-position: 0 0;
}

#logo > div.c2 {
    background-position: 0 -43px;
}

#logo > div.c3 {
    background-position: 0 -86px;
}

#logo:hover {
	padding-top: 0px;
	transform: rotateX(360deg);
   transition: padding-top 200ms ease-out, transform 1400ms ease-in-out;
}
#logo:hover > div {
	margin-bottom: 20px;
    transition: margin-bottom 200ms ease-out, transform 200ms ease-in 1200ms;
}
#logo:hover > .c3 {
	transform: translate(0,-20px);
}
#logo:hover > .c1 {
	transform: translate(0,20px);
}







​

dabblet.html

<div id="logo">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
</div>

​

settings.json

{"view":"split","prefixfree":"1","page":"css"}