← back to Only CSS: 3D Scancompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Only CSS: 3D Scan
A 0.34T 0.25
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>Rotating Cube with Concentric Circles</title>
7 <style>
8 body {
9 margin: 0;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 background: #121212;
15 overflow: hidden;
16 }
17
18 .container {
19 position: relative;
20 width: 300px;
21 height: 300px;
22 }
23
24 .cube {
25 position: absolute;
26 width: 100%;
27 height: 100%;
28 transform-style: preserve-3d;
29 animation: rotateCube 10s linear infinite;
30 }
31
32 .cube::before {
33 content: '';
34 position: absolute;
35 top: 0;
36 left: 0;
37 width: 100%;
38 height: 100%;
39 border: 1px solid rgba(255, 255, 255, 0.1);
40 border-radius: 5px;
41 z-index: 1;
42 }
43
44 .circle-container {
45 position: absolute;
46 top: 50%;
47 left: 50%;
48 transform: translate(-50%, -50%);
49 width: 100px;
50 height: 100px;
51 z-index: 2;
52 }
53
54 .circle {
55 position: absolute;
56 width: 100px;
57 height: 100px;
58 border: 2px solid transparent;
59 border-radius: 50%;
60 animation: rotateCircle 10s linear infinite;
61 transform-origin: center;
62 }
63
64 .circle:nth-child(1) {
65 animation-delay: 0s;
66 border-color: #00f0ff;
67 }
68
69 .circle:nth-child(2) {
70 animation-delay: 0.5s;
71 border-color: #00a0ff;
72 }
73
74 .circle:nth-child(3) {
75 animation-delay: 1s;
76 border-color: #0050ff;
77 }
78
79 .circle:nth-child(4) {
80 animation-delay: 1.5s;
81 border-color: #0000ff;
82 }
83
84 .circle:nth-child(5) {
85 animation-delay: 2s;
86 border-color: #0000cc;
87 }
88
89 .circle:nth-child(6) {
90 animation-delay: 2.5s;
91 border-color: #000099;
92 }
93
94 .circle:nth-child(7) {
95 animation-delay: 3s;
96 border-color: #000066;
97 }
98
99 .circle:nth-child(8) {
100 animation-delay: 3.5s;
101 border-color: #000033;
102 }
103
104 .circle:nth-child(9) {
105 animation-delay: 4s;
106 border-color: #000000;
107 }
108
109 .circle:nth-child(10) {
110 animation-delay: 4.5s;
111 border-color: #000000;
112 }
113
114 .circle:nth-child(11) {
115 animation-delay: 5s;
116 border-color: #000000;
117 }
118
119 .circle:nth-child(12) {
120 animation-delay: 5.5s;
121 border-color: #000000;
122 }
123
124 .circle:nth-child(13) {
125 animation-delay: 6s;
126 border-color: #000000;
127 }
128
129 .circle:nth-child(14) {
130 animation-delay: 6.5s;
131 border-color: #000000;
132 }
133
134 .circle:nth-child(15) {
135 animation-delay: 7s;
136 border-color: #000000;
137 }
138
139 .circle:nth-child(16) {
140 animation-delay: 7.5s;
141 border-color: #000000;
142 }
143
144 .circle:nth-child(17) {
145 animation-delay: 8s;
146 border-color: #000000;
147 }
148
149 .circle:nth-child(18) {
150 animation-delay: 8.5s;
151 border-color: #000000;
152 }
153
154 .circle:nth-child(19) {
155 animation-delay: 9s;
156 border-color: #000000;
157 }
158
159 .circle:nth-child(20) {
160 animation-delay: 9.5s;
161 border-color: #000000;
162 }
163
164 .circle:nth-child(21) {
165 animation-delay: 10s;
166 border-color: #000000;
167 }
168
169 @keyframes rotateCube {
170 0% {
171 transform: rotateY(0deg) rotateX(0deg);
172 }
173 100% {
174 transform: rotateY(360deg) rotateX(360deg);
175 }
176 }
177
178 @keyframes rotateCircle {
179 0% {
180 transform: rotate(0deg);
181 }
182 100% {
183 transform: rotate(360deg);
184 }
185 }
186 </style>
187</head>
188<body>
189 <div class="container">
190 <div class="cube">
191 <div class="circle-container">
192 <div class="circle"></div>
193 <div class="circle"></div>
194 <div class="circle"></div>
195 <div class="circle"></div>
196 <div class="circle"></div>
197 <div class="circle"></div>
198 <div class="circle"></div>
199 <div class="circle"></div>
200 <div class="circle"></div>
201 <div class="circle"></div>
202 <div class="circle"></div>
203 <div class="circle"></div>
204 <div class="circle"></div>
205 <div class="circle"></div>
206 <div class="circle"></div>
207 <div class="circle"></div>
208 <div class="circle"></div>
209 <div class="circle"></div>
210 <div class="circle"></div>
211 <div class="circle"></div>
212 </div>
213 </div>
214 </div>
215
216 <script>
217 // Add gradient effect to circles
218 const circles = document.querySelectorAll('.circle');
219 circles.forEach((circle, index) => {
220 const gradient = `linear-gradient(${index * 10}deg, #00f0ff, #00a0ff, #0050ff, #0000ff, #0000cc, #000099, #000066, #000033, #000000)`;
221 circle.style.background = gradient;
222 circle.style.border = 'none';
223 circle.style.backgroundSize = '400% 400%';
224 circle.style.animation = `rotateCircle 10s linear infinite, gradientShift 10s linear infinite`;
225 });
226
227 // Add gradient shift animation
228 const gradientShift = document.createElement('style');
229 gradientShift.textContent = `
230 @keyframes gradientShift {
231 0%, 100% {
232 background-position: 0% 50%;
233 }
234 50% {
235 background-position: 100% 50%;
236 }
237 }
238 `;
239 document.head.appendChild(gradientShift);
240 </script>
241</body>
242</html>