cube by div+css（立方体附加旋转动画）

1

2

3

4

5

6

 1     <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         .box{
 7             width: 200px;
 8             height: 200px;
 9             position: relative;
10             margin: 100px auto ;
11             transform-style: preserve-3d;
12             transform: rotateY(30deg) rotateX(30deg);
13             animation: mymove 10s linear;
14         }
15         .inner{
16             width: 200px;
17             height: 200px;
18             position: absolute;
19             font: 900 30px/200px "楷体" ;
20             text-align: center;
21             color: white;
22             opacity: 0.9;
23         }
24         /*现移动后旋转*/
25         .inner:first-child{
26             background-color: burlywood;
27             transform: translateY(100px) rotateX(90deg);
28         }
29         .inner:nth-child(2){
30             background-color: #B0FFCA;
31             transform: translateY(-100px) rotateX(-90deg);
32         }
33         .inner:nth-child(3){
34             background-color: rosybrown;
35             transform: translateX(-100px) rotateY(-90deg);
36         }
37         .inner:nth-child(4){
38             background-color: #FFB2E4;
39             transform: translateX(100px) rotateY(90deg);
40         }
41         .inner:nth-child(5){
42             background: cornflowerblue;
43             transform: translateZ(100px) ;
44         }
45         .inner:nth-child(6){
46             background-color: deepskyblue;
47             transform: translateZ(-100px) rotateY(180deg) ;
48         }
49         @keyframes mymove {
50         0%{
51             transform: rotateY(60deg) rotateX(60deg);
52         }
53         10%{
54             transform: rotateY(120deg) rotateX(120deg);
55         }
56         20%{
57             transform: rotateY(180deg) rotateX(180deg);
58         }
59         30%{
60             transform: rotateY(180deg) rotateX(240deg);
61         }
62         40%{
63             transform: rotateY(180deg) rotateX(240deg);
64         }
65         50%{
66             transform: rotateY(120deg) rotateX(300deg);
67         }
68         60%{
69             transform: rotateY(120deg) rotateX(360deg);
70         }
71         70%{
72             transform: rotateY(180deg) rotateX(360deg);
73         }
74         80%{
75             transform: rotateY(240deg) rotateX(420deg);
76         }
77         90%{
78             transform: rotateY(300deg) rotateX(420deg);
79         }
80         100%{
81             transform: rotateY(420deg) rotateX(420deg);
82         }
83     }
84     </style>
85     <div class="box">
86         <div class="inner">1</div>
87         <div class="inner">2</div>
88         <div class="inner">3</div>
89         <div class="inner">4</div>
90         <div class="inner">5</div>
91         <div class="inner">6</div>
92         </div>