CSS3 3d旋转效果

最新推荐文章于 2024-01-12 16:07:34 发布

程序员鼓励师

最新推荐文章于 2024-01-12 16:07:34 发布

阅读量1.1k

点赞数

文章标签：效果

本文链接：https://blog.csdn.net/sinbas/article/details/46284881

版权

CSS3 3d旋转效果

<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>