1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>无标题</title>
5 <style type="text/css">
6 body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{
7 margin:0;
8 padding:0;
9 }
10 body{
11 display: flex;
12 background: -webkit-linear-gradient(top,#222,#333);
13 background: linear-gradient(top,#222,#333);
14 justify-content:center;
15 align-items:center;
16 align-content:center;
17 flex-wrap:wrap;
18 position:relative;
19 }
20 [class$="box"]{
21 background-color: #e7e7e7;
22 width: 104px;
23 height: 104px;
24 /*padding:4px;
25 margin:16px;*/
26 object-fit:contain;
27 border-radius: 10%;
28 box-shadow: inset 0 5px white,inset 0 -5px #bbb,inset 5px 0 #d7d7d7,inset -5px 0 #d7d7d7;
29 display: flex;
30
31 position: absolute;
32 top:0;
33 left: 0;
34 /*top: 40%;
35 left: 40%;*/
36 }
37 [class="item"]{
38 display: block;
39 width:24px;
40 height: 24px;
41 border-radius: 50%;
42 margin:4px;
43 background-color: #333;
44 box-shadow: inset 0 3px #111,inset 0 -3px #555;
45 }
46 .first-box{
47 justify-content:center;
48 align-items:center;
49 align-content:center;
50 }
51 .second-box{
52 justify-content:space-between;
53 }
54 .second-box .item:nth-of-type(2){
55 -webkit-align-self:flex-end;
56 }
57 .third-box{
58
59 }
60 .third-box .item:nth-of-type(2){
61 align-self:center;
62 }
63 .third-box .item:nth-of-type(3){
64 align-self:flex-end;
65 }
66 .sixth-box,
67 .four-box{
68 justify-content:space-between;
69 justify-wrap:wrap;
70 }
71 .sixth-box .column,
72 .four-box .column{
73 display: flex;
74 flex-direction:column;
75 justify-content:space-between;
76 }
77 .fifth-box{
78 justify-content:space-between;
79 }
80 .fifth-box .column{
81 display: flex;
82 flex-direction:column;
83 justify-content:space-between;
84 }
85 .fifth-box .column:nth-of-type(2){
86 justify-content:center;
87 align-items:center;
88 }
89
90 .tbox{
91 width: 104px;
92 height: 104px;
93
94 background-color: transparent;
95 border:none;
96 box-shadow: none;
97 transform-style:preserve-3d;
98 display: flex;
99 justify-content:center;
100 align-items:center;
101 align-content:center;
102 flex-wrap:wrap;
103 position:relative;
104 -webkit-animation:iphone 4s linear infinite;
105
106 transform:rotateZ(30deg);
107 }
108 .tbox:hover{
109 -webkit-animation-play-state:paused;
110 }
111 .sixth-box{
112 /*transform:rotate(30deg);*/
113 transform-origin:right bottom;
114 transform:rotateZ(30deg);
115 }
116 .fifth-box{
117 margin-left: 25px;
118 margin-top: 7px;
119 transform-origin:right 50%;
120 transform:translateZ(-105px) rotateY(90deg) rotateX(-29deg);
121 }
122 .four-box{
123 margin-left: 40px;
124 margin-top: -45px;
125 /*margin-top: -36px;*/
126 transform-origin:left 50%;
127 transform:translateZ(-105px) rotateY(-90deg) rotateX(30deg);
128 }
129 .third-box{
130 margin-left: 40px;
131 margin-top:-45px;
132 /*margin-left: 240px;*/
133 transform-origin:left 50%;
134 transform:translateZ(-105px) rotateZ(30deg);
135 }
136 .second-box{
137 margin-left: 7px;
138 margin-top:80px;
139 /*margin-top: 128px;*/
140 transform-origin: 50% top;
141 transform:translateZ(-105px) rotateX(90deg) rotateY(30deg);
142 }
143 .first-box{
144 margin-left:58px;
145 margin-top:-116px;
146 /*margin-top: -96px;*/
147 transform-origin: 50% bottom;
148 transform:translateZ(-105px) rotateX(-90deg) rotateY(-30deg);
149 }
150
151 @-webkit-keyframes iphone{
152 from{
153 transform:rotateY(0deg);
154 }
155 to{
156 transform:rotateY(360deg);
157 }
158 }
159 </style>
160 </head>
161 <body>
162 <div class="tbox">
163 <div class="first-box">
164 <span class="item"></span>
165 </div>
166 <div class="second-box">
167 <span class="item"></span>
168 <span class="item"></span>
169 </div>
170 <div class="third-box">
171 <span class="item"></span>
172 <span class="item"></span>
173 <span class="item"></span>
174 </div>
175 <div class="four-box">
176 <div class="column">
177 <span class="item"></span>
178 <span class="item"></span>
179 </div>
180 <div class="column">
181 <span class="item"></span>
182 <span class="item"></span>
183 </div>
184 </div>
185 <div class="fifth-box">
186 <div class="column">
187 <span class="item"></span>
188 <span class="item"></span>
189 </div>
190 <div class="column">
191 <span class="item"></span>
192 </div>
193 <div class="column">
194 <span class="item"></span>
195 <span class="item"></span>
196 </div>
197 </div>
198 <div class="sixth-box">
199 <div class="column">
200 <span class="item"></span>
201 <span class="item"></span>
202 <span class="item"></span>
203 </div>
204 <div class="column">
205 <span class="item"></span>
206 <span class="item"></span>
207 <span class="item"></span>
208 </div>
209 </div>
210 </div>
211
212 </body>
213 </html>
