1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title></title>
7 <style type="text/css">
8 #div{
9 width: 900px;
10 height: 900px;
11 border: 0px solid green;
12 }
13 #box {
14 width: 1000px;
15 height: 1000px;
16 border: 0px solid green;
17 transform-style: preserve-3d;
18 position: absolute;
19 animation: spinCube 15s linear infinite alternate;
20 }
21
22
23 #box div {
24 width: 200px;
25 height: 200px;
26 position: absolute;
27 top: 600px;
28 left: 600px;
29 opacity: 0.7;
30 color: white;
31 text-align: center;
32 font-size: 150px;
33 font-weight: 600;
34 }
35
36 @keyframes spinCube {
37 0% {
38 transform: rotateX( 0deg) rotateY( 0deg);
39 }
40 100% {
41 transform: rotateX( 90deg) rotateY( 360deg);
42 }
43 }
44 /*参考面 正面*/
45
46 .d1 {
47 background: red;
48 }
49 /*底部*/
50
51 .d2 {
52 transform: rotateX(90deg);
53 background: yellow;
54 transform-origin: bottom;
55 }
56 /*顶部*/
57
58 .d3 {
59 transform: rotateX(90deg) translateY(-200px);
60 background: green;
61 transform-origin: top;
62 }
63 /*左边*/
64
65 .d4 {
66 transform: rotateY(90deg);
67 background: blue;
68 transform-origin: left;
69 }
70 /*右边*/
71
72 .d5 {
73 transform: rotateY(-90deg);
74 background: black;
75 transform-origin: right;
76 }
77 /*背面*/
78
79 .d6 {
80 transform: translateZ(-200px);
81 background: gray;
82 }
83 </style>
84 </head>
85
86 <body>
87 <div id="div">
88 <div id="box">
89 <div class="d1">1</div>
90 <div class="d2">2</div>
91 <div class="d3">3</div>
92 <div class="d4">4</div>
93 <div class="d5">5</div>
94 <div class="d6">6</div>
95 </div>
96 </div>
97 </body>
98
99 </html>
时间： 2024-07-31 11:19:12