← back to Only CSS: Japanese "人力車"compare with ground truth →
model output
GPT-5.4
Only CSS: Japanese "人力車"
A 0.69T 0.39
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" />
6<title>Recreated Chair Rotation</title>
7<style>
8 html, body {
9 margin: 0;
10 height: 100%;
11 background: #fff;
12 overflow: hidden;
13 font-family: sans-serif;
14 }
15
16 .stage {
17 width: 100vw;
18 height: 100vh;
19 display: grid;
20 place-items: center;
21 perspective: 1100px;
22 perspective-origin: 50% 45%;
23 }
24
25 /* Whole object slowly rotates around vertical axis */
26 .scene {
27 position: relative;
28 width: 420px;
29 height: 420px;
30 transform-style: preserve-3d;
31 animation: spin 6.4s linear infinite;
32 }
33
34 .chair {
35 position: absolute;
36 left: 50%;
37 top: 50%;
38 width: 0;
39 height: 0;
40 transform-style: preserve-3d;
41 transform:
42 translate3d(-50%, -50%, 0)
43 rotateX(68deg)
44 rotateZ(-2deg);
45 }
46
47 .part {
48 position: absolute;
49 transform-style: preserve-3d;
50 }
51
52 /* Seat */
53 .seat {
54 width: 150px;
55 height: 92px;
56 background: #ff0a0a;
57 transform:
58 translate3d(-75px, -10px, 0);
59 }
60
61 /* Backrest */
62 .back {
63 width: 150px;
64 height: 195px;
65 background: linear-gradient(to top, #ff1a12 0%, #ff7a12 42%, #ffb31a 72%, #fff200 100%);
66 transform-origin: 50% 100%;
67 transform:
68 translate3d(-75px, -205px, 0)
69 rotateX(-88deg);
70 }
71
72 /* Side blocks / arm supports */
73 .side {
74 width: 26px;
75 height: 78px;
76 background: #000;
77 transform-origin: 50% 50%;
78 }
79
80 .side.left {
81 transform: translate3d(-92px, -2px, 0);
82 }
83
84 .side.right {
85 transform: translate3d(66px, -2px, 0);
86 }
87
88 /* Wheels */
89 .wheel {
90 width: 118px;
91 height: 118px;
92 border: 6px solid #000;
93 border-radius: 50%;
94 background: transparent;
95 box-sizing: border-box;
96 }
97
98 .wheel.left {
99 transform: translate3d(-118px, -22px, 0) rotateX(90deg);
100 }
101
102 .wheel.right {
103 transform: translate3d(0px, -22px, 0) rotateX(90deg);
104 }
105
106 /* Base frame */
107 .frame {
108 width: 300px;
109 height: 170px;
110 border: 6px solid #000;
111 background: transparent;
112 box-sizing: border-box;
113 transform-origin: 50% 50%;
114 transform:
115 translate3d(-150px, 18px, -2px);
116 }
117
118 /* Slight line softness similar to rasterized source */
119 .wheel, .frame, .side, .seat, .back {
120 filter: saturate(1.02);
121 }
122
123 @keyframes spin {
124 from {
125 transform: rotateY(0deg);
126 }
127 to {
128 transform: rotateY(360deg);
129 }
130 }
131
132 /* Keep proportions similar on smaller screens */
133 @media (max-width: 700px) {
134 .scene { transform: scale(.72); transform-origin: center; }
135 }
136</style>
137</head>
138<body>
139 <div class="stage">
140 <div class="scene">
141 <div class="chair">
142 <div class="part frame"></div>
143 <div class="part wheel left"></div>
144 <div class="part wheel right"></div>
145 <div class="part side left"></div>
146 <div class="part side right"></div>
147 <div class="part seat"></div>
148 <div class="part back"></div>
149 </div>
150 </div>
151 </div>
152
153<script>
154 // No JS required; CSS handles the continuous rotation.
155</script>
156</body>
157</html>