← back to Only CSS: Truck a GO, GO! GOOOO!!compare with ground truth →
model output
Qwen3-VL-8B-Instruct
Only CSS: Truck a GO, GO! GOOOO!!
A 0.43T 0.23
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Rotating Truck Animation</title>
6 <style>
7 body {
8 margin: 0;
9 display: flex;
10 justify-content: center;
11 align-items: center;
12 height: 100vh;
13 background: white;
14 overflow: hidden;
15 }
16 .truck {
17 width: 100px;
18 height: 60px;
19 position: relative;
20 animation: rotate 4s infinite ease-in-out;
21 }
22 .truck:before {
23 content: '';
24 position: absolute;
25 top: 0;
26 left: 0;
27 width: 100%;
28 height: 100%;
29 background: #d4c7b4;
30 border-radius: 5px;
31 box-shadow: 0 5px 10px rgba(0,0,0,0.2);
32 }
33 .truck .window {
34 position: absolute;
35 top: 10px;
36 right: 10px;
37 width: 30px;
38 height: 20px;
39 background: #87ceeb;
40 border-radius: 3px;
41 }
42 .truck .wheel {
43 position: absolute;
44 width: 15px;
45 height: 15px;
46 background: #333;
47 border-radius: 50%;
48 bottom: 10px;
49 }
50 .truck .wheel:nth-child(1) {
51 left: 20px;
52 }
53 .truck .wheel:nth-child(2) {
54 left: 60px;
55 }
56 .truck .wheel:nth-child(3) {
57 left: 20px;
58 transform: rotate(180deg);
59 }
60 .truck .wheel:nth-child(4) {
61 left: 60px;
62 transform: rotate(180deg);
63 }
64 @keyframes rotate {
65 0% {
66 transform: rotateY(0deg) translateZ(0);
67 }
68 25% {
69 transform: rotateY(180deg) translateZ(0);
70 }
71 50% {
72 transform: rotateY(360deg) translateZ(0);
73 }
74 75% {
75 transform: rotateY(540deg) translateZ(0);
76 }
77 100% {
78 transform: rotateY(720deg) translateZ(0);
79 }
80 }
81 </style>
82</head>
83<body>
84 <div class="truck">
85 <div class="window"></div>
86 <div class="wheel"></div>
87 <div class="wheel"></div>
88 <div class="wheel"></div>
89 <div class="wheel"></div>
90 </div>
91</body>
92</html>