CSS3 3D cube

by kanelbula

HTML

<nav>
<ul>
    <li>
        <a class="link" href="/blog">
            <div class="anim">
                <div>B</div>
                <div>L</div>
                <div>O</div>
                <div>G</div>
                <div class="last">BLOG</div>
            </div>
        </a>
    </li>
    <li>
        <a class="link" href="/about">
            <div class="anim">
                <div>A</div>
                <div>B</div>
                <div>O</div>
                <div>U</div>
                <div class="last">ABOUT</div>
            </div>
        </a>
    </li>
</ul>
</nav>

CSS

nav {
    overflow: hidden;
   position:relative; 
    height: 34px;
    width:500px;
}
ul {
   height: 34px;
    background-color: #ccc;
    margin: 0;
    padding: 0 60px 0 0;
    margin: 0;
    border-radius: 2px;
    position: absolute;
    right:0;
    top:0;
    -webkit-animation: slide-in 0.6s;
}
ul li {
    float:left;
}

.link {
    width: 160px;
    height: 34px; 
    text-decoration: none;
    display: block;
    position: relative;
    font-family: Helvetica,Arial;
    font-size: 18px;
    color:#ffffff;
    text-align: center;
    margin-left:30px;
    -webkit-perspective:400px;
    -webkit-perspective-origin: 50% 50%;
}

.anim {
    width: 100%;
    height: 100%; 
    -webkit-transition: all 0.7s; 
    -webkit-transform-origin: 50% 50% -17px; /* half height */
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    position: relative;
    -webkit-animation: x-spin-out 0.01s 0s, x-spin-in 1.0s 1s;
}

.link:hover .anim {
    -webkit-transition: all 0.8s;
    -webkit-transform:rotateX(360deg);
}

.anim div {
    width: 160px;
    height: 28px;
    position: absolute;
    
    padding: 6px 0 0 0;
    top:0;
    left:0;
    -webkit-transform-origin: 50% 50% 50%;
    -webkit-backface-visibility: visible;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}

.anim div:first-child
{
    z-index:1;
    background-color: #777777;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
    -ms-transition: all 0.25s;
    transition: all 0.25s;
    -webkit-animation: hide 1s 0s;
}
.anim div:nth-child(2) {
    background-color: #666666;
    -webkit-transform: translate3d(0,17px,-17px) rotate3d(1,0,0,-90deg); /* half height */
}
.anim div:nth-child(3) {
    background-color: #808080;
    -webkit-transform: translate3d(0,0,-34px) rotate3d(1,0,0,180deg); /* full height */
}
.anim div:nth-child(4) {
    background-color: #707070;
    -webkit-transform: translate3d(0,-17px,-17px)...