• 一个基于HTML5的网页文字3D旋转动画效果，支持中文和英文字符，浏览请注意要使用支持CSS3技术的浏览器，比如Opera、Chrome等，主要结合transition 和 animation来实现，参考性更高。


<!doctype html>

<title>CSS 文字3D旋转特效</title>

<link href='http://fonts.googleapis.com/css?family=Ultra&v2' rel='stylesheet' type='text/css'>

<style>

body{background:#333;}

h1{font:normal 90px/1.5 'Ultra','Curlz MT','Bauhaus 93','Blackoak Std',Courier,Arial;color:#7e9409;position:absolute;top:85px;left:10px;width:300px;

-moz-animation: 1s slidein;

-webkit-animation: 1s slidein;

-webkit-perspective: 600;

-moz-perspective: 600px;

}

@-moz-keyframes slidein {

from {top:1550px;}

85% {top:5px;}

to {top:85px;}

}

@-webkit-keyframes slidein {

from {top:1550px;}

85% {top:5px;}

to {top:85px;}

}

.myLogo,.myLogo a{

-moz-transition: all 2s ease-in-out 0s;

-webkit-transition:all 2s ease-in-out 0;

transition:all 2s ease-in-out 0;

}

.myLogo{position:relative;display:inline-block;zoom:1;top:0;left:0;text-shadow:-2px -1px 1px #7e9409;opacity: 0.8;filter:alpha(opacity=50);

-webkit-transform: rotateY(30deg);

-moz-transform: rotateY(30deg);

transform: rotateY(30deg);

}

h1:hover .myLogo {

-webkit-transform: rotateY(0);

-moz-transform: rotateY(0);

transform: rotateY(0);

text-shadow:0;

}

.myLogo a{position:absolute;top:1px;left:5px;color:#B7D902;text-shadow:-1px -1px 1px #fff;text-decoration: none;}

h1:hover .myLogo a{left: 2px;}

</style>

<h1>

<span class="myLogo">源码爱好者 CodeFans<a href="http://www.codefans.net">源码爱好者 CodeFans</a></span>

</h1>