--------------------------------------
用css3的新属性来设置3D盒
子效果（chrome浏览器），
代码如下：
-------------------------------------
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>3D-box</title>
6 <style type="text/css">
7 *{
8 margin:0;
9 padding:0;
10 -webkit-user-select:none;
11 }
12 .wrap{
13 width:100px;
14 height:100px;
15 padding:100px;
16 border:5px solid black;
17 margin:160px auto;
18 -webkit-perspective:600px; //设置景深;
19 -webkit-transform:scale(1); //缩放倍数;
20 }
21 .box{
22 animation:change 6s linear infinite; //设置动画效果;
23 width:100px;
24 height:100px;
25 position:relative;
26 -webkit-transform-style:preserve-3d; //指定3D样式;
27 transition:5s; //设置动画完成一次所用时间;
28 -webkit-transform-origin:center center -50px; //设置旋转中心点;
29 }
30 .box div{
31 width:100px;
32 height:100px;
33 position:absolute;
34 color:black;
35 font-family:"Courier New";
36 font-size:60px;
37 line-height:100px;
38 text-align:center;
39 }
40 .box div:nth-of-type(1){
41 left:0;
42 top:-100px;
43 background:red;
44 -webkit-transform-origin:bottom; //旋转的轴;
45 -webkit-transform:rotateX(90deg); //沿着x轴旋转90度;
46 }
47 .box div:nth-of-type(2){
48 left:-100px;
49 top:0;
50 background:yellow;
51 -webkit-transform-origin:right;
52 -webkit-transform:rotateY(-90deg);
53 }
54 .box div:nth-of-type(3){
55 left:0;
56 top:0;
57 background:blue;
58 }
59 .box div:nth-of-type(4){
60 left:100px;
61 top:0;
62 background:green;
63 -webkit-transform-origin:left;
64 -webkit-transform:rotateY(90deg);
65 }
66 .box div:nth-of-type(5){
67 left:0;
68 top:100px;
69 background:purple;
70 -webkit-transform-origin:top;
71 -webkit-transform:rotateX(-90deg);
72 }
73 .box div:nth-of-type(6){
74 left:0;
75 top:0;
76 background:orange;
77 -webkit-transform:translateZ(-100px) rotateY(180deg);
78 }
79 @keyframes change{ //设置每一段的的变化效果，
80 25%{-webkit-transform:rotateY(180deg);}
81 50%{-webkit-transform:rotateY(360deg);}
82 75%{-webkit-transform:rotateX(180deg);}
83 100%{-webkit-transform:rotateX(360deg);}
84 }
85 </style>
86 </head>
87 <body>
88 <div class="wrap">
89 <div class="box">
90 <div>1</div>
91 <div>2</div>
92 <div>3</div>
93 <div>4</div>
94 <div>5</div>
95 <div>6</div>
96 </div>
97 </div>
98 </body>
99 </html>
----------------------------------------
原理：利用十字型分别
折叠90度各边拼接成
3D的盒子；
-----------------over-----------------
感谢你的阅读；
时间： 2024-12-25 21:02:01