CSS3 3d旋转效果
2015-05-31 08:13
603 查看
CSS3 3d旋转效果
试下吧小伙伴
[code]<style type="text/css">
bodys{
font-family:Microsoft YaHei,"微软雅黑",Lucida,Verdana,Hiragino Sans GB,STHeiti,WenQuanYi Micro Hei,Droid Sans Fallback,SimSun,sans-serif;
animation: fade 3s;
-moz-animation: fade 3s; /* Firefox */
-webkit-animation: fade 3s; /* Safari 和 Chrome */
-o-animation: fade 3s;
}
body{
animation: flipper 3s ease-in;
-moz-animation: flipper 3s ease-in;
-webkit-animation: flipper 3s ease-in;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;}
@-webkit-keyframes flipper{
0%{-webkit-transform:perspective(2500px) rotateY(0deg)}
15%,100%{-webkit-transform:perspective(2500px) rotateY(360deg)}}
@-moz-keyframes flipper{0%{-moz-transform:perspective(2500px) rotateY(0deg)}15%,
100%{-moz-transform:perspective(2500px) rotateY(360deg)}}
@keyframes flipper{0%{transform:perspective(2500px) rotateY(0deg)}15%,
100%{transform:perspective(2500px) rotateY(360deg)}}
#blogCalendar{
font-family: digit,cnword;
}
</style>
<body>
<a name="top"></a>
<!--done-->
<div id="home">
<div id="header">
<div id="blogTitle">
<a id="lnkBlogLogo" href=" /"><img id="blogLogo" src="csdn.gif" alt="返回主页" /></a>
<!--done-->
<h1><a id="Header1_HeaderTitle" class="headermaintitle" href="/">CSDN</a></h1>
<h2>全球最大中文IT社区，为IT专业技术人员提供最全面的信息传播和服务平台</h2>
</body>试下吧小伙伴
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 