Animated Hover Effect inspired by @visualidiot

dabblet.css

/**
 * Animated Hover Effect inspired by @visualidiot
 */

body {
  background: url(http://visualidiot.com/assets/img/pattern.jpg);
  width: 200px;
  padding-top: 200px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;    
  font-weight: 600;
}



ul {
  padding: 20px 0;
  text-align: right;
}
  ul li {
    list-style: none;
  }
  ul a {
    display: inline-block;
    margin-bottom: 3px;
    color: #947711;
    font-size: 13px;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,.2);
    transition: color .25s;
    text-decoration: none;
    position: relative;
  }
    ul a:hover {
      color: #554307;
    }
    ul a span {
      transition: all .3s cubic-bezier(1, 0, .1, .5); 
      display: block; 
      transform-style: preserve-3d;
    }
    ul a:hover span {
      
      transform: rotateY(180deg);
      opacity: 0;
    }
    ul img {
      position: absolute;
      left: 35%;
      transition: all .3s;
      transition-delay: .3s;
      transform: rotateY(180deg);
      transform-style: preserve-3d;
      backface-visibility: hidden;
      opacity: 0;		
    }
      ul a:hover img {
        opacity: 1;
	transform: rotateY(0deg);
      }

dabblet.html

<ul>
  <li>
    <a href="#">
      <img src="http://visualidiot.com/assets/img/twitter.png" alt="Icon for my Twitter profile">
      <span>Twitter</span>            
    </a>
  </li>
</<ul>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}