<div class="foo">
<span class="letter" data-letter="A">A</span>
<span class="letter" data-letter="B">B</span>
<span class="letter" data-letter="C">C</span>
<span class="letter" data-letter="D">D</span>
<span class="letter" data-letter="E">E</span>
<span class="letter" data-letter="F">F</span>
<span class="letter" data-letter="G">G</span>
<span class="letter" data-letter="H">H</span>
<span class="letter" data-letter="I">I</span>
<span class="letter" data-letter="L">L</span>
<span class="letter" data-letter="M">M</span>
<span class="letter" data-letter="N">N</span>
<span class="letter" data-letter="O">O</span>
<span class="letter" data-letter="P">P</span>
<span class="letter" data-letter="Q">Q</span>
<span class="letter" data-letter="R">R</span>
<span class="letter" data-letter="S">S</span>
<span class="letter" data-letter="T">T</span>
<span class="letter" data-letter="U">U</span>
<span class="letter" data-letter="V">V</span>
<span class="letter" data-letter="Z">Z</span>
</div> CSS3
.letter{
display: inline-block
font-weight: 900
font-size: 8em
margin: 0.2em
position: relative
color: #00B4F1
transform-style: preserve-3d
perspective: 400
z-index: 1
} 这样我们就让这些字母安安静静的排列起来，并有了自己的背景颜色，等待强大的CSS3来渲染。
接下来我们要让文字在鼠标滑过的时候产生翻转倾斜的动画。
.letter:before, .letter:after{
position:absolute
content: attr(data-letter)
transform-origin: top left
top:0
left:0
}
.letter, .letter:before, .letter:after{
transition: all 0.3s ease-in-out
}
.letter:before{
color: #fff
text-shadow:
-1px 0px 1px rgba(255,255,255,.8),
1px 0px 1px rgba(0,0,0,.8)
z-index: 3
transform:
rotateX(0deg)
rotateY(-15deg)
rotateZ(0deg)
}
.letter:after{
color: rgba(0,0,0,.11)
z-index:2
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(0deg)
rotateZ(0deg)
skew(0deg,1deg)
}
.letter:hover:before{
color: #fafafa
transform:
rotateX(0deg)
rotateY(-40deg)
rotateZ(0deg)
}
.letter:hover:after{
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(40deg)
rotateZ(0deg)
skew(0deg,22deg)
}
你这也许需要CSS3的3D属性，甚至是WebGL…参考一下吧：
HTML范例ie.microsoft.com/testdrive
开发者文档msdn.microsoft.com/zh-cn/library/ie/hh673529.aspx
有，不过这个"时代"还需要等待，因为所有浏览器还没有真正的支持，可以用的有ie9以上、Chrome以及Safari、火狐等支持html5的浏览器，一下是针对body对应的代码：
body{-webkit-transform: scaleX(-1) /*webkit内核的，比如chrome等*/
-moz-transform:scaleX(-1)/*火狐的*/
}
你可以试一试，浏览器需要完全支持，总有那么一天的事，还需等待。
