animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Only CSS: Japanese "人力車"

model output

Qwen3-VL-8B-Instruct

Only CSS: Japanese "人力車"

A 0.67T 0.42
compare with ground truth →
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Rotating Chair Animation</title>
6    <style>
7        body {
8            display: flex;
9            justify-content: center;
10            align-items: center;
11            height: 100vh;
12            background: white;
13            margin: 0;
14        }
15        .chair {
16            position: relative;
17            width: 150px;
18            height: 150px;
19            transform-style: preserve-3d;
20            animation: rotate 4s linear infinite;
21        }
22        .seat {
23            position: absolute;
24            width: 100px;
25            height: 80px;
26            background: linear-gradient(to bottom, yellow, red);
27            transform: rotateX(30deg) rotateY(0deg);
28            transform-origin: center bottom;
29            top: 50px;
30            left: 25px;
31        }
32        .backrest {
33            position: absolute;
34            width: 100px;
35            height: 80px;
36            background: linear-gradient(to bottom, yellow, red);
37            transform: rotateX(30deg) rotateY(0deg);
38            transform-origin: center bottom;
39            top: 50px;
40            left: 25px;
41        }
42        .arm {
43            position: absolute;
44            width: 20px;
45            height: 100px;
46            background: black;
47            transform-origin: center bottom;
48            top: 0;
49            left: 100px;
50        }
51        .arm2 {
52            position: absolute;
53            width: 20px;
54            height: 100px;
55            background: black;
56            transform-origin: center bottom;
57            top: 0;
58            left: 0;
59        }
60        .wheel {
61            position: absolute;
62            width: 60px;
63            height: 60px;
64            border: 2px solid black;
65            border-radius: 50%;
66            transform-origin: center;
67            top: 100px;
68            left: 100px;
69        }
70        .wheel2 {
71            position: absolute;
72            width: 60px;
73            height: 60px;
74            border: 2px solid black;
75            border-radius: 50%;
76            transform-origin: center;
77            top: 100px;
78            left: 0;
79        }
80        .base {
81            position: absolute;
82            width: 100px;
83            height: 20px;
84            background: black;
85            transform-origin: center;
86            top: 120px;
87            left: 25px;
88        }
89        @keyframes rotate {
90            0% {
91                transform: rotateY(0deg) rotateX(0deg);
92            }
93            25% {
94                transform: rotateY(45deg) rotateX(0deg);
95            }
96            50% {
97                transform: rotateY(90deg) rotateX(0deg);
98            }
99            75% {
100                transform: rotateY(135deg) rotateX(0deg);
101            }
102            100% {
103                transform: rotateY(180deg) rotateX(0deg);
104            }
105        }
106    </style>
107</head>
108<body>
109    <div class="chair">
110        <div class="seat"></div>
111        <div class="backrest"></div>
112        <div class="arm"></div>
113        <div class="arm2"></div>
114        <div class="wheel"></div>
115        <div class="wheel2"></div>
116        <div class="base"></div>
117    </div>
118</body>
119</html>