------------------------------------------- DEMO -----------------------------------------------
------------------------------------------- CSS3 -----------------------------------------------
.grid { margin:0; padding:0; list-style:none; position:relative; width:650px; font-family:Tahoma, Geneva, sans-serif; }
.grid li { position:relative; float:left; font-size:150px; line-height:160px; text-align:center; width:10%;
width:-webkit-calc(100% / 5); width:calc(100% / 5); }
.grid li span { display:inline-block; font-weight:900; line-height:1; position:relative; color:hsla(0, 0%, 0%, 0.6);
-webkit-transform-style
reserve-3d; -ms-transform-style
reserve-3d; transform-style
reserve-3d; -webkit-perspective:550px;
-ms-perspective:550px; perspective:550px; z-index:1; }
.grid li span:before, .grid li span:after { position:absolute; content:attr(data-letter); line-height:inherit; top:0; left:0; right:0;
bottom:0; z-index:2; -webkit-transition:all .3s; transition:all .3s; }
.grid li span:before { text-shadow:none; color:hsla(0, 0%, 0%, 0.12); }
.text_left { background:#0072b4; }
.text_left span { text-shadow:1px 4px 6px #00c6ff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #00c6ff; }
.text_left span:after { color:#fff; }
.text_left:hover span:after { color:#ff0; }
.text_left span:before, .text_left span:after { -webkit-transform-origin:0 50%; -ms-transform-origin:0 50%; transform-origin:0 50%; }
.text_left span:before { -webkit-transform:scale(1.08,1) skew(0deg,1deg); -ms-transform:scale(1.08,1) skew(0deg,1deg);
transform:scale(1.08,1) skew(0deg,1deg); }
.text_left span:after { text-shadow:-1px 0px 0px hsla(360, 100%, 100%, 0.1), 3px 0px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform:rotateY(-15deg); -ms-transform:rotateY(-15deg); transform:rotateY(-15deg); }
.text_left:hover span:before { -webkit-transform:scale(0.85,1) skew(0deg,20deg); -ms-transform:scale(0.85,1) skew(0deg,20deg);
transform:scale(0.85,1) skew(0deg,20deg); }
.text_left:hover span:after { -webkit-transform:rotateY(-40deg); -ms-transform:rotateY(-40deg); transform:rotateY(-40deg); }
------------------------------------------- HTML5 ----------------------------------------------
