HTML5网页动画 3D旋转展示

2024-09-05 12:18:58

字体：大中小

来源：转载

供稿：网友

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

<!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>欢迎访问HTML5博客</div><div>武林网</div></div></div></body></html>

上一篇：CSS3 生成ICO图标，很逼真

下一篇：HTML5中使用正则表达式的例子