Untitled

dabblet.css

div#logo {
   display: block;
   margin: 150px auto 0;
   width: 128px;
   height: 128px;
   background: url(http://meodai.ch/hvlogo.png);
}

div#logo div {
    opacity: 0;
    width: 100%;
    margin: 30px 0 0;
    height: 33.333%;
    background: transparent url(http://a2.twimg.com/profile_images/1296150742/hv_twitter_reasonably_small.png) -400px 44px no-repeat;
    
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    
}

div#logo:hover div {
    opacity: 1;
    margin: 0;
    -webkit-transform: rotate(0);
    -webkit-transition: background-position 0.7s ease-out,
                        margin 0.3s ease-out,
                        -webkit-transform 1s ease-in-out;
    -moz-transform: rotate(0);
    -moz-transition: background-position 0.7s ease-out,
                        margin 0.3s ease-out,
                        -moz-transform 1s ease-in-out;    
}

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

div#logo div.c2 {
    margin-right: 50px;
}

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

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

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"}