CSS3动画 3DBOX
时间：2021-07-01 10:21:17
帮助过：5人阅读
<!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>旋转盒子
</title>
6 <meta charset="utf-8" />
7 <style>
8 * {
9 margin: 0px;
10 padding: 0px;
11 }
12 @keyframes box {
13 100% {
14 transform: rotate3d(100,100,100,360deg);
15 }
16 }
17 #box {
18 position: absolute;
19 top: 30%;
20 left: 50%;
21 /*position:relative;*/
22 perspective: 2000px;
23 perspective-origin: 500px -300px;
24 animation: box 5s linear 7s infinite both;
25 transform-style: preserve-3d;
26 }
27 .item {
28 position: absolute;
29 border: 1px solid #000000;
30 opacity: 0.5;
31 width: 200px;
32 height: 200px;
33 font-size: 100px;
34 background-color: #7b8efb;
35 text-align: center;
36 line-height: 200px;
37 }
38 @keyframes box1 {
39 100% {
40 transform: rotateY(-90deg);
41 }
42 }
43 #box1 {
44 z-index: 6;
45 transform-origin: left;
46 animation: box1 1s linear 1s both;
47 }
48 @keyframes box2 {
49 100% {
50 transform: rotateY(90deg);
51 }
52 }
53 #box2 {
54 z-index: 5;
55 transform-origin: right;
56 animation: box2 1s linear 2s both;
57 }
58 @keyframes box3 {
59 100% {
60 transform: rotateX(90deg);
61 }
62 }
63 #box3 {
64 z-index: 4;
65 transform-origin: top;
66 animation: box3 1s linear 3s both;
67 }
68 @keyframes box4 {
69 100% {
70 transform: rotateX(-90deg);
71 }
72 }
73 #box4 {
74 z-index: 3;
75 transform-origin: bottom;
76 animation: box4 1s linear 4s both;
77 }
78 @keyframes box5 {
79 100% {
80 transform: translateZ(200px);
81 }
82 }
83 #box5 {
84 z-index: 2;
85 animation: box5 1s linear 5s both;
86 }
87 @keyframes box6 {
88 100% {
89 transform: rotateY(180deg);
90 }
91 }
92 #box6 {
93 animation: box6 1s linear 6s both;
94 }
95 </style>
96 </head>
97 <body>
98 <div id="box">
99 <div class="item" id="box1">1
</div>
100 <div class="item" id="box2">2
</div>
101 <div class="item" id="box3">3
</div>
102 <div class="item" id="box4">4
</div>
103 <div class="item" id="box5">5
</div>
104 <div class="item" id="box6">6
</div>
105 </div>
106 </body>
107 </html>
CSS3动画 3DBOX
标签：form net res ext com pre text abs logs
