← back to Only CSS: 3D Scancompare with ground truth →
model output
LLaMA 4 Scout
Only CSS: 3D Scan
A 0.53T 0.27
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 width: 200px;
15 height: 200px;
16 transform-style: preserve-3d;
17 transform: rotateX(0deg) rotateY(0deg);
18 }
19 .wireframe {
20 position: absolute;
21 width: 100%;
22 height: 100%;
23 box-shadow: 0 0 0 1px #fff;
24 border: 1px solid transparent;
25 }
26 .circle {
27 position: absolute;
28 top: 50%;
29 left: 50%;
30 transform: translate(-50%, -50%);
31 width: 150px;
32 height: 150px;
33 border-radius: 50%;
34 box-shadow: 0 0 0 1px #03A9F4;
35 animation: pulse 2s linear infinite;
36 }
37 .circle-inner {
38 position: absolute;
39 top: 50%;
40 left: 50%;
41 transform: translate(-50%, -50%);
42 width: 120px;
43 height: 120px;
44 border-radius: 50%;
45 box-shadow: 0 0 0 1px #8BC34A;
46 animation: pulse-inner 2s linear infinite;
47 }
48 @keyframes pulse {
49 0% {
50 width: 150px;
51 height: 150px;
52 opacity: 1;
53 }
54 50% {
55 width: 160px;
56 height: 160px;
57 opacity: 0.8;
58 }
59 100% {
60 width: 150px;
61 height: 150px;
62 opacity: 1;
63 }
64 }
65 @keyframes pulse-inner {
66 0% {
67 width: 120px;
68 height: 120px;
69 opacity: 1;
70 }
71 50% {
72 width: 130px;
73 height: 130px;
74 opacity: 0.8;
75 }
76 100% {
77 width: 120px;
78 height: 120px;
79 opacity: 1;
80 }
81 }
82 @keyframes rotate {
83 0% {
84 transform: rotateX(0deg) rotateY(0deg);
85 }
86 100% {
87 transform: rotateX(360deg) rotateY(360deg);
88 }
89 }
90 </style>
91</head>
92<body>
93 <div class="cube" style="animation: rotate 10s linear infinite;">
94 <div class="wireframe"></div>
95 <div class="circle" style="animation-delay: 0.5s;"></div>
96 <div class="circle-inner"></div>
97 </div>
98</body>
99</html>