您好，欢迎来到源码搜藏！分享精神，快乐你我！提示：担心找不到本站？在百度搜索“源码搜藏”，网址永远不丢失！

[加入VIP] 设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签

当前位置：首页 > 网页特效 > 其他特效 >

3D旋转展示 HTML5网页动画

时间：2013-11-19 16:07 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>transform-style的3D效果</title>
<style>
*{font-size: 14px;color: #fff; 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://www.codesocang.com/">欢迎访问HTML5博客</a></div>
<div><a href="http://www.codesocang.com/">源码搜藏</a></div>
</div>
</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

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

3D旋转展示 HTML5网页动画由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/qitatexiao/6474.html

标签：网站源码

上一篇：HTML5 Canvas原子球粒子运动效果

下一篇：无jquery的JavaScript弹出式日历控件

[其他特效] html5实现的旋转的太阳系动画

[其他特效] 采用VML技术绘制DNA图形

[其他特效] JS文字球状放大效果

[其他特效] 带缓冲的收缩与展开内容效果

[其他特效] 屏蔽鼠标右键代码

[其他特效] 仿Windows垂直调整代码

[其他特效] 鼠标事件之游来游去的小鱼

[其他特效] 网页调用media player代码

[其他特效] 网页状态栏页面停留时间特效

[其他特效] 超酷JS拖拽翻页效果

[其他特效] JS复制到剪切板

[其他特效] 清空代码防止查看源代码

相关内容推荐

7个海洋生物PNG图标

MySQL安装指南

Library功能简介

防止图片撑破

SVG指针时钟

3D幻灯片特效

全国地图热点

3D商务生活PNG图标

我叫MT铃声下载

怎样提升自己的能力

网页制作公司

关于我们 | 版权声明 | 广告服务 | 联系我们 | 常见问题 | 网站地图 | 网友投稿 | 在线留言

分享精神，快乐你我！联系QQ:498277184

本站资源是从网络整理所得,如果无意侵犯了贵司版权，请与源码搜藏网联系，我们会及时处理和回复，谢谢!

鲁ICP备13013982号-1