1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8" />
5<meta name="viewport" content="width=device-width,initial-scale=1" />
6<title>Isometric Road Flip</title>
7<style>
8 :root{
9 --sky:#67b7df;
10 --top:#8f8f8f;
11 --left:#6a6a6a;
12 --right:#9a9a9a;
13 --line:#fff;
14 --car-red:#e85b73;
15 --car-red-dark:#b93f5a;
16 --car-red-light:#ff7b86;
17 --glass:#a9d8f2;
18 --wheel:#4b3f7a;
19 --hub:#d9d9ff;
20 }
21
22 html,body{
23 margin:0;
24 width:100%;
25 height:100%;
26 overflow:hidden;
27 background:var(--sky);
28 font-family:sans-serif;
29 }
30
31 .scene{
32 position:relative;
33 width:100vw;
34 height:100vh;
35 perspective:1200px;
36 overflow:hidden;
37 background:var(--sky);
38 }
39
40 .world{
41 position:absolute;
42 left:50%;
43 top:50%;
44 width:420px;
45 height:230px;
46 transform-style:preserve-3d;
47 transform:
48 translate(-50%,-50%)
49 rotateX(58deg)
50 rotateZ(-24deg)
51 scale(1);
52 animation: worldSpin 8s linear infinite;
53 }
54
55 .road{
56 position:absolute;
57 inset:0;
58 transform-style:preserve-3d;
59 }
60
61 .face{
62 position:absolute;
63 box-sizing:border-box;
64 }
65
66 .top{
67 width:420px;
68 height:230px;
69 background:var(--top);
70 transform:translateZ(60px);
71 }
72
73 .top::before,
74 .top::after{
75 content:"";
76 position:absolute;
77 inset:0;
78 background:
79 linear-gradient(90deg,
80 transparent 0 14%,
81 var(--line) 14% 16%,
82 transparent 16% 38%,
83 var(--line) 38% 40%,
84 transparent 40% 62%,
85 var(--line) 62% 64%,
86 transparent 64% 86%,
87 var(--line) 86% 88%,
88 transparent 88% 100%);
89 mask:linear-gradient(#000 0 100%);
90 opacity:.95;
91 }
92
93 .top::after{
94 background:
95 linear-gradient(90deg,
96 transparent 0 14%,
97 var(--line) 14% 16%,
98 transparent 16% 38%,
99 var(--line) 38% 40%,
100 transparent 40% 62%,
101 var(--line) 62% 64%,
102 transparent 64% 86%,
103 var(--line) 86% 88%,
104 transparent 88% 100%);
105 transform:translateY(0);
106 clip-path:polygon(0 46%,100% 46%,100% 54%,0 54%);
107 }
108
109 .left{
110 width:420px;
111 height:120px;
112 background:var(--left);
113 transform-origin:50% 0;
114 transform:
115 rotateX(-90deg)
116 translateZ(0px);
117 top:230px;
118 left:0;
119 }
120
121 .right{
122 width:230px;
123 height:120px;
124 background:var(--right);
125 transform-origin:0 50%;
126 transform:
127 rotateY(90deg)
128 translateZ(420px);
129 top:0;
130 left:0;
131 }
132
133 .left::before,
134 .right::before{
135 content:"";
136 position:absolute;
137 width:10px;
138 height:40px;
139 background:#f2f2f2;
140 opacity:.9;
141 }
142
143 .left::before{ left:48px; top:38px; }
144 .right::before{ right:34px; top:38px; }
145
146 .car-wrap{
147 position:absolute;
148 left:210px;
149 top:115px;
150 width:74px;
151 height:48px;
152 transform-style:preserve-3d;
153 transform:
154 translate3d(-50%,-50%,61px)
155 rotateZ(0deg);
156 animation: drive 8s linear infinite;
157 }
158
159 .car{
160 position:absolute;
161 inset:0;
162 transform-style:preserve-3d;
163 animation: bob .45s ease-in-out infinite alternate;
164 }
165
166 .body{
167 position:absolute;
168 left:10px;
169 top:14px;
170 width:42px;
171 height:22px;
172 background:var(--car-red);
173 border:2px solid var(--car-red-dark);
174 border-radius:3px;
175 box-shadow:inset -4px -2px 0 rgba(255,255,255,.12);
176 }
177
178 .cab{
179 position:absolute;
180 left:18px;
181 top:2px;
182 width:28px;
183 height:18px;
184 background:var(--car-red-light);
185 border:2px solid #d85a6d;
186 border-radius:2px;
187 box-shadow:inset -3px -2px 0 rgba(255,255,255,.12);
188 }
189
190 .windshield{
191 position:absolute;
192 left:12px;
193 top:8px;
194 width:18px;
195 height:12px;
196 background:var(--glass);
197 border:2px solid #7fb8d8;
198 transform:skewX(-18deg);
199 border-radius:2px;
200 }
201
202 .side{
203 position:absolute;
204 left:40px;
205 top:12px;
206 width:12px;
207 height:20px;
208 background:#f7f7f7;
209 border:2px solid #d9d9d9;
210 border-radius:2px;
211 }
212
213 .bumper{
214 position:absolute;
215 left:8px;
216 top:32px;
217 width:44px;
218 height:4px;
219 background:#9f3550;
220 border-radius:2px;
221 }
222
223 .light{
224 position:absolute;
225 top:31px;
226 width:5px;
227 height:5px;
228 background:#fff8d8;
229 border-radius:50%;
230 box-shadow:0 0 2px rgba(255,255,220,.8);
231 }
232 .l1{ left:12px; }
233 .l2{ left:24px; }
234 .l3{ left:36px; }
235
236 .wheel{
237 position:absolute;
238 width:10px;
239 height:10px;
240 background:var(--wheel);
241 border-radius:50%;
242 box-shadow:inset 0 0 0 2px #2f2750;
243 }
244 .wheel::after{
245 content:"";
246 position:absolute;
247 inset:3px;
248 background:var(--hub);
249 border-radius:50%;
250 }
251 .w1{ left:14px; top:31px; }
252 .w2{ left:42px; top:31px; }
253
254 .shadow{
255 position:absolute;
256 left:12px;
257 top:34px;
258 width:44px;
259 height:12px;
260 background:rgba(0,0,0,.18);
261 filter:blur(3px);
262 border-radius:50%;
263 transform:translateZ(-1px);
264 }
265
266 @keyframes bob{
267 from{ transform:translateY(0px); }
268 to{ transform:translateY(-1.5px); }
269 }
270
271 @keyframes drive{
272 0%{
273 transform:translate3d(-95px,-18px,61px) rotateZ(0deg);
274 }
275 31%{
276 transform:translate3d(-10px,-2px,61px) rotateZ(0deg);
277 }
278 62%{
279 transform:translate3d(78px,14px,61px) rotateZ(0deg);
280 }
281 100%{
282 transform:translate3d(-95px,-18px,61px) rotateZ(0deg);
283 }
284 }
285
286 @keyframes worldSpin{
287 0%,24%{
288 transform:
289 translate(-50%,-50%)
290 rotateX(58deg)
291 rotateZ(-24deg)
292 scale(1);
293 }
294 30%,70%{
295 transform:
296 translate(-50%,-50%)
297 rotateX(118deg)
298 rotateZ(-24deg)
299 scale(1);
300 }
301 76%,100%{
302 transform:
303 translate(-50%,-50%)
304 rotateX(58deg)
305 rotateZ(-24deg)
306 scale(1);
307 }
308 }
309</style>
310</head>
311<body>
312 <div class="scene">
313 <div class="world">
314 <div class="road">
315 <div class="face top"></div>
316 <div class="face left"></div>
317 <div class="face right"></div>
318
319 <div class="car-wrap">
320 <div class="car">
321 <div class="shadow"></div>
322 <div class="cab"></div>
323 <div class="body"></div>
324 <div class="windshield"></div>
325 <div class="side"></div>
326 <div class="bumper"></div>
327 <div class="light l1"></div>
328 <div class="light l2"></div>
329 <div class="light l3"></div>
330 <div class="wheel w1"></div>
331 <div class="wheel w2"></div>
332 </div>
333 </div>
334 </div>
335 </div>
336 </div>
337</body>
338</html>