Animated Rolling 3D Effect CSS 3

Kembali menggeBRAK trick seputaran variable CSS hover Dahulu kala pada waktu 20-11-2011 master Hakim El Hattab ~ @hakimel mengeluarkan article mengenai Rolling Links! Efek berputar ketika link di sorot menggunakan cursor. Dengan sedikit keikutsertaan secuil JavaScript, maka pada sesi penggunaan menjadi simpel. Lantas bagaimana bila hal serupa untuk sekarang dapat dilakukan hanya memakai property CSS? Penasarankan ;))
Sudah barang tentu browse sobat sudah harus mendukung CSS3 property. Penulisan syntax HTML yang rada belibet merupakan satu kendala tersendiri :D Inilah dia

KODE CSS

.ani-roll {
margin: 10px auto;
text-align: center;
display: inline-block;
}
.ani-roll a {
color: #fff;
display: block;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
text-transform: uppercase;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
}
.efek-3d {
-webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px;
-webkit-transition: all .07s linear;
-moz-transition: all .07s linear;
transition: all .07s linear;
position: relative;
}
.efek-3d:not(.active):hover {
cursor: pointer;
}
.efek-3d:not(.active):hover .efek-3d-box, .efek-3d:not(.active):focus .efek-3d-box {
-moz-transform: translateZ(-25px) rotateX(90deg);
-webkit-transform: translateZ(-25px) rotateX(90deg);
-o-transform: translateZ(-25px) rotateX(90deg);
transform: translateZ(-25px) rotateX(90deg);
}
.efek-3d-box {
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
-webkit-transform: translatez(-25px);
-moz-transform: translatez(-25px);
-o-transform: translatez(-25px);
transform: translatez(-25px);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.depan {
-webkit-transform: rotatex(0deg) translatez(25px);
-moz-transform: rotatex(0deg) translatez(25px);
-o-transform: rotatex(0deg) translatez(25px);
transform: rotatex(0deg) translatez(25px);
color: #debe94;
background: #21416b;
}
.belakang {
-webkit-transform: rotatex(-90deg) translatez(25px);
-moz-transform: rotatex(-90deg) translatez(25px);
-o-transform: rotatex(-90deg) translatez(25px);
transform: rotatex(-90deg) translatez(25px);
background: #C79048;
color: #debe94;
box-shadow: 0 3px 5px #000;
text-shadow:0px 0px 0 rgb(187,131,58),1px 1px 0 rgb(168,117,52), 2px 2px 0 rgb(144,101,44),3px 3px 2px rgba(0,0,0,0.6),3px 3px 1px rgba(0,0,0,0.5),0px 0px 2px rgba(0,0,0,.2);
}
.depan, .belakang {
display: block;
position: absolute;
top: 0;
left: 0;
padding: 15px 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

Markup HTML<div class="ani-roll">
<a href="#" class="efek-3d">Animated 3D Flipping
<span class="efek-3d-box">
<span class="depan">Animated 3D Flipping</span>
<span class="belakang">Animated 3D Flipping</span>
</span>
</a>
</div>

Koben mendapatkan trik itu dari master David Walsh ~ @davidwalshblog dengan judul postingan Animated 3D Flipping Menu with CSS Silahkan kalian baca disana guna mendapatkan menu keren punya b-)
Other:
http://zsitro.com/css3-rolling-links/
http://www.dreamdealer.nl/articles/how_to_create_3d_links_rolling_on_hover.html
Happy coding \m/