← back to Only CSS: Japanese "人力車"compare with ground truth →
model output
Gemini 3 Flash Preview
Only CSS: Japanese "人力車"
A 0.62T 0.36
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 Rotating stylized chair</title>
7 <style>
8 :root {
9 --yellow: #ffff00;
10 --orange: #ff8000;
11 --red: #ff0000;
12 --border-width: 4px;
13 --animation-duration: 7.5s;
14 }
15
16 body {
17 margin: 0;
18 padding: 0;
19 display: flex;
20 justify-content: center;
21 align-items: center;
22 height: 100vh;
23 background-color: #ffffff;
24 overflow: hidden;
25 }
26
27 .viewport {
28 perspective: 1000px;
29 width: 400px;
30 height: 400px;
31 display: flex;
32 justify-content: center;
33 align-items: center;
34 }
35
36 .scene {
37 position: relative;
38 width: 0;
39 height: 0;
40 transform-style: preserve-3d;
41 animation: spin var(--animation-duration) linear infinite;
42 }
43
44 /* The animation combines a Z-axis rotation for the circular path
45 and a Y-axis rotation to show the 3D depth, with a fixed X-tilt. */
46 @keyframes spin {
47 0% {
48 transform: rotateX(20deg) rotateZ(0deg) rotateY(0deg);
49 }
50 100% {
51 transform: rotateX(20deg) rotateZ(-360deg) rotateY(360deg);
52 }
53 }
54
55 /* Common styles for planes */
56 .part {
57 position: absolute;
58 box-sizing: border-box;
59 border: var(--border-width) solid black;
60 transform-style: preserve-3d;
61 }
62
63 /* The Backrest */
64 .backrest {
65 width: 110px;
66 height: 130px;
67 left: -55px;
68 bottom: 0;
69 background: linear-gradient(to bottom, var(--yellow), var(--orange));
70 transform-origin: bottom;
71 }
72
73 /* The Seat */
74 .seat {
75 width: 110px;
76 height: 110px;
77 left: -55px;
78 top: 0;
79 background: linear-gradient(to bottom, var(--orange), var(--red));
80 transform-origin: top;
81 transform: rotateX(-90deg);
82 }
83
84 /* The Outer Frame */
85 .frame {
86 width: 140px;
87 height: 240px;
88 left: -70px;
89 top: 0;
90 border: var(--border-width) solid black;
91 transform-origin: top;
92 /* Positioned below the seat */
93 transform: translateY(45px) rotateX(-90deg);
94 }
95
96 /* The Wheels */
97 .wheel {
98 position: absolute;
99 width: 160px;
100 height: 160px;
101 border: var(--border-width) solid black;
102 border-radius: 50%;
103 top: -80px;
104 left: -80px;
105 }
106
107 .wheel.left {
108 transform: translateX(-65px) rotateY(90deg);
109 }
110
111 .wheel.right {
112 transform: translateX(65px) rotateY(90deg);
113 }
114
115 /* Internal axle line (optional visual anchor) */
116 .axle {
117 position: absolute;
118 width: 130px;
119 height: 2px;
120 background: black;
121 left: -65px;
122 top: -1px;
123 transform: rotateY(0deg);
124 }
125 </style>
126</head>
127<body>
128
129 <div class="viewport">
130 <div class="scene">
131 <!-- The Axel center is (0,0,0) -->
132 <div class="axle"></div>
133
134 <!-- Chair components -->
135 <div class="part backrest"></div>
136 <div class="part seat"></div>
137
138 <!-- Wireframe base -->
139 <div class="frame"></div>
140
141 <!-- Wheels -->
142 <div class="wheel left"></div>
143 <div class="wheel right"></div>
144 </div>
145 </div>
146
147 <script>
148 /**
149 * Recreating the smooth 3D transformation seen in the source video.
150 * The combination of rotateZ and rotateY creates the specific "tumbling"
151 * effect where the object rotates through all faces while moving in a circle.
152 */
153 </script>
154</body>
155</html>