低调奢华 CSS3 transform-style 3D旋转

浏览数：18 / 时间：2015年06月09日

点击这里查看效果：
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>