- <!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.liuxiaofan.com/">刘晓帆的博客</a></div>
- <div><a href="http://www.veryhuo.com/">访问烈火网站</a></div>
- </div>
- </div>
- </body>
- </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
来源: http://www.phpxs.com/code/1008027/