[ HTML5] HTML5网页动画 3D旋转展示

2014-08-19 04:45:58 -0400

代码说明

可以沿Y轴360度旋转的网页Div动画，只要在DIV内的内容都会被显示，本效果基于HTML5的transform-style，对测试环境有要求，除了IE9，其它的IE版本都不行，可考虑使用火狐、Chrome浏览器。本动画效果支持多个Div层，可多个层连在一起滚动

代码复制

<style>
*{font-size: 14px; padding:0; margin:0;}
#container {
position: relative;
height: 300px;
width: 300px;
-webkit-perspective: 500;
margin-top: 200px;
margin-right: auto;
margin-left: auto;
}
#parent {
margin: 10px;
width: 280px;
height: 280px;
background-color: #666;
opacity: 0.8;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 5s infinite linear;
}
#parent > div {
position: absolute;
top: 40px;
left: 40px;
width: 280px;
height: 200px;
padding: 10px;
-webkit-box-sizing: border-box;
}
#parent > :first-child {
background-color: #000;
-webkit-transform: translateZ(-100px) rotateY(45deg);
}
#parent > :last-child {
background-color: #333;
-webkit-transform: translateZ(50px) rotateX(20deg);
-webkit-transform-origin: 50% top;
}
/*执行Y轴360度旋转动画*/
@-webkit-keyframes spin {
from {-webkit-transform: rotateY(0);}
to {-webkit-transform: rotateY(360deg);}
}
</style>
</head>
<body>
<div id="container">
<div id="parent">
<div><a href="http://x6.wodemo.net/">欢迎访问</a></div>
<div><a href="http://x6.wodemo.net/">X6网盘</a></div>
</div>
</div>
</body>
</html>

代码演示

«Newer Older»

----Comments(1)----
陌儿 (@mrzone) | @ at 2014-08-21 02:36:
gfff

Back to home

Subscribe | Register | Login | N