← back to Road Blockcompare with ground truth →
model output
Gemini 3 Flash Preview
Road Block
A 0.74T 0.20
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.0">
6 <title>Isometric Truck Flip Animation</title>
7 <style>
8 :root {
9 --bg-color: #7bc5e8;
10 --road-main: #959595;
11 --road-side: #757575;
12 --road-edge: #555555;
13 --truck-red: #e65a64;
14 --truck-dark: #b84850;
15 --truck-light: #f17d85;
16 --window-color: #79aed2;
17 --animation-duration: 6s;
18 }
19
20 body, html {
21 margin: 0;
22 padding: 0;
23 width: 100%;
24 height: 100%;
25 background-color: var(--bg-color);
26 display: flex;
27 justify-content: center;
28 align-items: center;
29 overflow: hidden;
30 font-family: sans-serif;
31 }
32
33 .scene {
34 perspective: 2000px;
35 width: 600px;
36 height: 600px;
37 display: flex;
38 justify-content: center;
39 align-items: center;
40 }
41
42 .isometric-wrapper {
43 transform-style: preserve-3d;
44 transform: rotateX(60deg) rotateZ(-45deg);
45 }
46
47 .flipper {
48 transform-style: preserve-3d;
49 animation: flip-cycle var(--animation-duration) cubic-bezier(0.65, 0, 0.35, 1) infinite;
50 }
51
52 @keyframes flip-cycle {
53 0%, 20% { transform: rotateY(0deg); }
54 35%, 70% { transform: rotateY(180deg); }
55 85%, 100% { transform: rotateY(360deg); }
56 }
57
58 /* Generic Box Helper */
59 .box {
60 position: absolute;
61 transform-style: preserve-3d;
62 }
63
64 .face {
65 position: absolute;
66 backface-visibility: visible;
67 }
68
69 /* Road Styling */
70 .road {
71 width: 320px;
72 height: 160px;
73 transform: translate(-160px, -80px);
74 }
75
76 .road .face {
77 background: var(--road-main);
78 }
79
80 .road .top { width: 320px; height: 160px; transform: translateZ(25px); background: var(--road-main); }
81 .road .bottom { width: 320px; height: 160px; transform: translateZ(-25px) rotateY(180deg); background: var(--road-main); }
82 .road .front { width: 320px; height: 50px; transform: translateY(80px) rotateX(-90deg); background: var(--road-side); }
83 .road .back { width: 320px; height: 50px; transform: translateY(-80px) rotateX(90deg); background: var(--road-side); }
84 .road .left { width: 50px; height: 160px; transform: translateX(-160px) rotateY(-90deg); background: var(--road-edge); }
85 .road .right { width: 50px; height: 160px; transform: translateX(135px) rotateY(90deg); background: var(--road-edge); }
86
87 /* Road Markings */
88 .road .top::after, .road .bottom::after {
89 content: '';
90 position: absolute;
91 top: 50%;
92 left: 0;
93 width: 100%;
94 height: 8px;
95 margin-top: -4px;
96 background-image: linear-gradient(to right, white 40%, transparent 40%);
97 background-size: 80px 100%;
98 background-position: 20px 0;
99 }
100
101 /* Truck Styling */
102 .truck-container {
103 position: absolute;
104 transform-style: preserve-3d;
105 transform: translate3d(-40px, -25px, 25px);
106 }
107
108 .truck-body {
109 width: 80px;
110 height: 50px;
111 transform-style: preserve-3d;
112 }
113
114 .truck-body .face { background: var(--truck-red); border: 1px solid rgba(0,0,0,0.05); }
115 .truck-body .top { width: 80px; height: 50px; transform: translateZ(40px); background: var(--truck-light); }
116 .truck-body .bottom { width: 80px; height: 50px; transform: translateZ(0); }
117 .truck-body .front { width: 80px; height: 40px; transform: translateY(25px) rotateX(-90deg); }
118 .truck-body .back { width: 80px; height: 40px; transform: translateY(-25px) rotateX(90deg); }
119 .truck-body .left { width: 40px; height: 50px; transform: translateX(-20px) rotateY(-90deg); background: var(--truck-dark); }
120 .truck-body .right { width: 40px; height: 50px; transform: translateX(60px) rotateY(90deg); background: var(--truck-dark); }
121
122 /* Cabin styling */
123 .cabin {
124 width: 30px;
125 height: 50px;
126 transform: translate3d(-30px, 0, 0);
127 transform-style: preserve-3d;
128 }
129
130 .cabin .face { background: var(--truck-red); border: 1px solid rgba(0,0,0,0.05); }
131 .cabin .top { width: 30px; height: 50px; transform: translateZ(30px); background: var(--truck-light); }
132 .cabin .front { width: 30px; height: 30px; transform: translateY(25px) rotateX(-90deg); }
133 .cabin .left { width: 30px; height: 50px; transform: translateX(-15px) rotateY(-90deg); background: var(--truck-dark); }
134 .cabin .left::after {
135 content: '';
136 position: absolute;
137 top: 5px; left: 10px; width: 25px; height: 15px;
138 background: var(--window-color);
139 }
140
141 /* Wheels */
142 .wheel {
143 width: 12px;
144 height: 6px;
145 background: #333;
146 position: absolute;
147 transform-style: preserve-3d;
148 }
149
150 .w1 { transform: translate3d(30px, 24px, -3px) rotateX(90deg); }
151 .w2 { transform: translate3d(-10px, 24px, -3px) rotateX(90deg); }
152 .w3 { transform: translate3d(30px, -30px, -3px) rotateX(90deg); }
153 .w4 { transform: translate3d(-10px, -30px, -3px) rotateX(90deg); }
154
155 /* Duplicate truck on bottom side */
156 .truck-container.bottom-side {
157 transform: translate3d(-40px, -25px, -25px) rotateY(180deg);
158 }
159
160 </style>
161</head>
162<body>
163
164 <div class="scene">
165 <div class="isometric-wrapper">
166 <div class="flipper">
167
168 <!-- Road Block -->
169 <div class="box road">
170 <div class="face top"></div>
171 <div class="face bottom"></div>
172 <div class="face front"></div>
173 <div class="face back"></div>
174 <div class="face left"></div>
175 <div class="face right"></div>
176 </div>
177
178 <!-- Truck on Top -->
179 <div class="truck-container">
180 <div class="box truck-body">
181 <div class="face top"></div>
182 <div class="face front"></div>
183 <div class="face back"></div>
184 <div class="face left"></div>
185 <div class="face right"></div>
186 </div>
187 <div class="box cabin">
188 <div class="face top"></div>
189 <div class="face front"></div>
190 <div class="face left"></div>
191 </div>
192 <div class="wheel w1"></div>
193 <div class="wheel w2"></div>
194 <div class="wheel w3"></div>
195 <div class="wheel w4"></div>
196 </div>
197
198 <!-- Truck on Bottom (visible when flipped) -->
199 <div class="truck-container bottom-side">
200 <div class="box truck-body">
201 <div class="face top"></div>
202 <div class="face front"></div>
203 <div class="face back"></div>
204 <div class="face left"></div>
205 <div class="face right"></div>
206 </div>
207 <div class="box cabin">
208 <div class="face top"></div>
209 <div class="face front"></div>
210 <div class="face left"></div>
211 </div>
212 <div class="wheel w1"></div>
213 <div class="wheel w2"></div>
214 <div class="wheel w3"></div>
215 <div class="wheel w4"></div>
216 </div>
217
218 </div>
219 </div>
220 </div>
221
222</body>
223</html>