← back to Only CSS: Japanese "人力車"compare with ground truth →
model output
Qwen3-VL-8B-Instruct
Only CSS: Japanese "人力車"
A 0.67T 0.42
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>