点击这里查看效果：
http://keleyi.com/a/bjad/s89uo4t1.htm
效果图：
CSS3 transform-style 属性
以下是代码：
10 <!DOCTYPE html> 11 <html> 12 <head> 13 <title>transform-style实现Div的3D旋转-柯乐义</title> 14 <style> 15 *{font-size: 24px;color: #00ff00; padding:0; margin:0;} 16 #container { 17 position: relative; 18 height: 300px; 19 width: 300px; 20 -webkit-perspective: 500; 21 margin-top: 200px; 22 margin-right: auto; 23 margin-left: auto; 24 } 25 #parent-keleyi-com { 26 margin: 10px; 27 width: 280px; 28 height: 280px; 29 background-color: #666; 30 opacity: 0.3; 31 -webkit-transform-style: preserve-3d; 32 -webkit-animation: spin 15s infinite linear; 33 } 34 #parent-keleyi-com > div { 35 position: absolute; 36 top: 40px; 37 left: 40px; 38 width: 280px; 39 height: 200px; 40 padding: 10px; 41 -webkit-box-sizing: border-box; 42 } 43 #parent-keleyi-com > :first-child { 44 background-color: #000; 45 -webkit-transform: translateZ(-100px) rotateY(45deg); 46 } 47 #parent-keleyi-com > :last-child { 48 background-color: #333; 49 -webkit-transform: translateZ(50px) rotateX(20deg); 50 -webkit-transform-origin: 50% top; 51 } 52 /*执行Y轴旋转360度动画*/ 53 @-webkit-keyframes spin { 54 from {-webkit-transform: rotateY(0);} 55 to {-webkit-transform: rotateY(360deg);} 56 } 57 </style> 58 </head> 59 <body> 60 <div>请使用支持CSS3的浏览器<a href="http://keleyi.com/a/bjad/s89uo4t1.htm" target="_blank">原文</a></div> 61 <div id="container"> 62 <div id="parent-keleyi-com"> 63 <div><a href="/">柯乐义</a></div> 64 <div><a href="/">keleyi.com</a></div> 65 </div> 66 </div> 67 </body> 68 </html>
