- <!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="<a href="http://www.liuxiaofan.com/">http://www.liuxiaofan.com/">刘晓帆的博客</a></div>
- <div><a href="<a href="http://www.veryhuo.com/">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='<a href="http://www.veryhuo.com/">http://www.veryhuo.com/' target='_blank'><a href="http://www.veryhuo.com/</a></div">http://www.veryhuo.com/</a></div>
- //该片段来自于http://www.codesnippet.cn/detail/150320132432.html
来源: http://www.codesnippet.cn/detail/150320132432.html