← back to Only CSS: Truck a GO, GO! GOOOO!!compare with ground truth →
model output
Gemini 3 Flash Preview
Only CSS: Truck a GO, GO! GOOOO!!
A 0.69T 0.33
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>3D Low-Poly Truck Animation</title>
7 <style>
8 :root {
9 --bg-color: #ffffff;
10 --truck-body: #d2c4a4;
11 --truck-body-dark: #b8ab8e;
12 --truck-body-light: #e8dbbc;
13 --window-color: #8ba8c7;
14 --light-color: #f8b8c0;
15 --wheel-color: #222222;
16 --shadow-color: rgba(0, 0, 0, 0.15);
17 --anim-speed: 3s;
18 }
19
20 body {
21 margin: 0;
22 padding: 0;
23 background-color: var(--bg-color);
24 overflow: hidden;
25 display: flex;
26 justify-content: center;
27 align-items: center;
28 height: 100vh;
29 perspective: 1200px;
30 }
31
32 .scene {
33 position: relative;
34 width: 0;
35 height: 0;
36 transform-style: preserve-3d;
37 transform: rotateX(-30deg) rotateY(0deg);
38 animation: sceneRotation var(--anim-speed) linear infinite;
39 }
40
41 @keyframes sceneRotation {
42 from { transform: rotateX(-30deg) rotateY(0deg); }
43 to { transform: rotateX(-30deg) rotateY(360deg); }
44 }
45
46 /* The orbit container keeps the truck at a distance from the center */
47 .orbit {
48 position: absolute;
49 transform-style: preserve-3d;
50 transform: translateX(180px); /* Radius of circular path */
51 }
52
53 /* Counter-rotate the truck so it faces the direction of travel */
54 .truck-container {
55 position: absolute;
56 transform-style: preserve-3d;
57 transform: rotateY(90deg); /* Face tangent to the circle */
58 top: -40px; /* Hover height */
59 }
60
61 /* Ground shadow */
62 .shadow {
63 position: absolute;
64 width: 140px;
65 height: 100px;
66 background: var(--shadow-color);
67 border-radius: 50%;
68 filter: blur(15px);
69 transform: rotateX(90deg) translateZ(-45px) translateX(-20px);
70 }
71
72 /* Helper for 3D cuboids */
73 .cuboid {
74 position: absolute;
75 transform-style: preserve-3d;
76 }
77
78 .cuboid div {
79 position: absolute;
80 background: var(--truck-body);
81 border: 1px solid rgba(0,0,0,0.05);
82 }
83
84 /* Cab dimensions: 50x50x60 */
85 .cab {
86 width: 50px; height: 50px;
87 transform: translate3d(20px, 0, 0);
88 }
89 .cab .front { width: 60px; height: 50px; transform: rotateY( 90deg) translateZ(25px); background: var(--truck-body-dark); }
90 .cab .back { width: 60px; height: 50px; transform: rotateY(-90deg) translateZ(25px); }
91 .cab .right { width: 50px; height: 50px; transform: rotateY( 0deg) translateZ(30px); }
92 .cab .left { width: 50px; height: 50px; transform: rotateY(180deg) translateZ(30px); }
93 .cab .top { width: 50px; height: 60px; transform: rotateX( 90deg) translateZ(30px); background: var(--truck-body-light); }
94 .cab .bottom { width: 50px; height: 60px; transform: rotateX(-90deg) translateZ(20px); }
95
96 /* Window details on front face */
97 .cab .front::after {
98 content: '';
99 position: absolute;
100 top: 10px; left: 10px; width: 40px; height: 25px;
101 background: var(--window-color);
102 }
103
104 /* Headlight details on front face */
105 .cab .front::before {
106 content: '';
107 position: absolute;
108 bottom: 5px; width: 10px; height: 6px;
109 background: var(--light-color);
110 left: 5px;
111 box-shadow: 40px 0 0 var(--light-color);
112 }
113
114 /* Truck bed dimensions: 60x30x60 */
115 .bed {
116 width: 60px; height: 30px;
117 transform: translate3d(-35px, 20px, 0);
118 }
119 .bed .front { width: 60px; height: 30px; transform: rotateY( 90deg) translateZ(30px); }
120 .bed .back { width: 60px; height: 30px; transform: rotateY(-90deg) translateZ(30px); background: var(--truck-body-dark); }
121 .bed .right { width: 60px; height: 30px; transform: rotateY( 0deg) translateZ(30px); }
122 .bed .left { width: 60px; height: 30px; transform: rotateY(180deg) translateZ(30px); }
123 .bed .top { width: 60px; height: 60px; transform: rotateX( 90deg) translateZ(30px); background: var(--truck-body-light); }
124 .bed .bottom { width: 60px; height: 60px; transform: rotateX(-90deg) translateZ(0px); }
125
126 /* Wheels */
127 .wheels {
128 position: absolute;
129 transform-style: preserve-3d;
130 top: 45px;
131 }
132 .wheel {
133 position: absolute;
134 width: 20px;
135 height: 20px;
136 background: var(--wheel-color);
137 border-radius: 50%;
138 transform-style: preserve-3d;
139 }
140 .w1 { transform: translate3d(35px, 0, 32px); }
141 .w2 { transform: translate3d(35px, 0, -32px); }
142 .w3 { transform: translate3d(-35px, 0, 32px); }
143 .w4 { transform: translate3d(-35px, 0, -32px); }
144
145 /* Adding thickness to wheels */
146 .wheel::after {
147 content: '';
148 position: absolute;
149 width: 20px;
150 height: 20px;
151 background: var(--wheel-color);
152 border-radius: 50%;
153 transform: translateZ(-5px);
154 }
155
156 </style>
157</head>
158<body>
159
160 <div class="scene">
161 <div class="orbit">
162 <div class="shadow"></div>
163 <div class="truck-container">
164 <!-- Main Cab -->
165 <div class="cab cuboid">
166 <div class="front"></div>
167 <div class="back"></div>
168 <div class="left"></div>
169 <div class="right"></div>
170 <div class="top"></div>
171 <div class="bottom"></div>
172 </div>
173 <!-- Truck Bed -->
174 <div class="bed cuboid">
175 <div class="front"></div>
176 <div class="back"></div>
177 <div class="left"></div>
178 <div class="right"></div>
179 <div class="top"></div>
180 <div class="bottom"></div>
181 </div>
182 <!-- Wheels -->
183 <div class="wheels">
184 <div class="wheel w1"></div>
185 <div class="wheel w2"></div>
186 <div class="wheel w3"></div>
187 <div class="wheel w4"></div>
188 </div>
189 </div>
190 </div>
191 </div>
192
193 <script>
194 // No complex JS required as CSS animations handle the smooth 3D looping
195 // The scene rotation coupled with the fixed truck offset creates the circular driving motion
196 </script>
197</body>
198</html>