model output
LLaMA 4 Scout

Only CSS: 3D Scan 2
A 0.14T 0.00
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>Animation</title>
7    <style>
8        body {
9            background-color: #000;
10            perspective: 600px;
11        }
12        .cube {
13            position: relative;
14            transform-style: preserve-3d;
15            transform: rotateX(25deg) rotateY(45deg);
16        }
17        .face {
18            position: absolute;
19            width: 200px;
20            height: 200px;
21            border: 1px solid #fff;
22            background-color: transparent;
23        }
24        .circle {
25            position: absolute;
26            width: 20px;
27            height: 20px;
28            border-radius: 50%;
29            border: 1px solid;
30            animation: rotate 5s linear infinite;
31        }
32        .green {
33            border-color: #0f0;
34        }
35        .purple {
36            border-color: #f0f;
37        }
38        .blue {
39            border-color: #00f;
40        }
41
42        @keyframes rotate {
43            0% {
44                transform: scale(1);
45            }
46            50% {
47                transform: scale(1.2);
48            }
49            100% {
50                transform: scale(1);
51            }
52        }
53
54        .box {
55            position: relative;
56            width: 200px;
57            height: 200px;
58            transform-style: preserve-3d;
59            animation: box-rotate 10s linear infinite;
60        }
61
62        @keyframes box-rotate {
63            0% {
64                transform: rotateX(25deg) rotateY(45deg);
65            }
66            50% {
67                transform: rotateX(65deg) rotateY(135deg);
68            }
69            100% {
70                transform: rotateX(25deg) rotateY(45deg);
71            }
72        }
73    </style>
74</head>
75<body>
76    <div class="cube" id="cube">
77        <!-- Cube content generated by JavaScript -->
78    </div>
79
80    <script>
81        const cube = document.getElementById('cube');
82        for (let i = 0; i < 6; i++) {
83            const face = document.createElement('div');
84            face.className = 'face';
85            face.style.transform = `rotateY(${i * 90}deg) translateZ(100px)`;
86            cube.appendChild(face);
87
88            for (let j = 0; j < 4; j++) {
89                const circle = document.createElement('div');
90                circle.className = 'circle';
91                if (j < 2) {
92                    circle.classList.add('green');
93                } else {
94                    circle.classList.add('purple');
95                }
96                circle.style.top = `${50 + j * 25}px`;
97                circle.style.left = `${50 + (i % 2) * 25}px`;
98                face.appendChild(circle);
99            }
100        }
101
102        // Add some animation to the circles
103        const circles = document.querySelectorAll('.circle');
104        circles.forEach((circle, index) => {
105            circle.style.animationDelay = `${index * 0.1}s`;
106        });
107    </script>
108</body>
109</html>