← back to Spiral Towercompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Spiral Tower
A 0.50T 0.22
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>3D Cube Animation</title>
6 <style>
7 body {
8 display: flex;
9 justify-content: center;
10 align-items: center;
11 height: 100vh;
12 background: #f9f9f9;
13 margin: 0;
14 }
15 .cube {
16 width: 100px;
17 height: 100px;
18 position: relative;
19 transform-style: preserve-3d;
20 animation: rotate 4s infinite linear;
21 }
22 .face {
23 position: absolute;
24 width: 100px;
25 height: 100px;
26 background: #8a9a9a;
27 transform-origin: center;
28 backface-visibility: visible;
29 }
30 .front {
31 transform: translateZ(50px);
32 }
33 .back {
34 transform: rotateY(180deg) translateZ(50px);
35 }
36 .right {
37 transform: rotateY(90deg) translateZ(50px);
38 }
39 .left {
40 transform: rotateY(-90deg) translateZ(50px);
41 }
42 .top {
43 transform: rotateX(90deg) translateZ(50px);
44 }
45 .bottom {
46 transform: rotateX(-90deg) translateZ(50px);
47 }
48 .stripes {
49 position: absolute;
50 top: 0;
51 left: 0;
52 width: 100%;
53 height: 100%;
54 background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.2) 100%);
55 transform: rotate(0deg);
56 animation: stripeRotate 4s infinite linear;
57 }
58 @keyframes rotate {
59 0% { transform: rotateX(0deg) rotateY(0deg); }
60 25% { transform: rotateX(0deg) rotateY(90deg); }
61 50% { transform: rotateX(0deg) rotateY(180deg); }
62 75% { transform: rotateX(0deg) rotateY(270deg); }
63 100% { transform: rotateX(0deg) rotateY(360deg); }
64 }
65 @keyframes stripeRotate {
66 0% { transform: rotate(0deg); }
67 25% { transform: rotate(90deg); }
68 50% { transform: rotate(180deg); }
69 75% { transform: rotate(270deg); }
70 100% { transform: rotate(360deg); }
71 }
72 </style>
73</head>
74<body>
75 <div class="cube">
76 <div class="face front"></div>
77 <div class="face back"></div>
78 <div class="face right"></div>
79 <div class="face left"></div>
80 <div class="face top"></div>
81 <div class="face bottom"></div>
82 <div class="stripes"></div>
83 </div>
84</body>
85</html>