← back to 4 'counter rotation' effectscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
4 'counter rotation' effects
A 0.44T 0.10
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 Flower Animation</title>
7<style>
8 body {
9 background-color: #000;
10 margin: 0;
11 padding: 0;
12 display: flex;
13 justify-content: center;
14 align-items: center;
15 height: 100vh;
16 }
17 .flower {
18 position: relative;
19 width: 80px;
20 height: 80px;
21 }
22 .center {
23 position: absolute;
24 top: 50%;
25 left: 50%;
26 transform: translate(-50%, -50%);
27 width: 20px;
28 height: 20px;
29 background-color: white;
30 border-radius: 50%;
31 z-index: 10;
32 }
33 .petal {
34 position: absolute;
35 width: 20px;
36 height: 20px;
37 border-radius: 50%;
38 background-color: #d12a2a;
39 transform-origin: 50% 50%;
40 animation: rotate 2s linear infinite;
41 }
42 .petal:nth-child(1) {
43 top: 50%;
44 left: 50%;
45 transform: translate(-50%, -50%) rotate(0deg);
46 }
47 .petal:nth-child(2) {
48 top: 50%;
49 left: 50%;
50 transform: translate(-50%, -50%) rotate(45deg);
51 }
52 .petal:nth-child(3) {
53 top: 50%;
54 left: 50%;
55 transform: translate(-50%, -50%) rotate(90deg);
56 }
57 .petal:nth-child(4) {
58 top: 50%;
59 left: 50%;
60 transform: translate(-50%, -50%) rotate(135deg);
61 }
62 .petal:nth-child(5) {
63 top: 50%;
64 left: 50%;
65 transform: translate(-50%, -50%) rotate(180deg);
66 }
67 .petal:nth-child(6) {
68 top: 50%;
69 left: 50%;
70 transform: translate(-50%, -50%) rotate(225deg);
71 }
72 .petal:nth-child(7) {
73 top: 50%;
74 left: 50%;
75 transform: translate(-50%, -50%) rotate(270deg);
76 }
77 .petal:nth-child(8) {
78 top: 50%;
79 left: 50%;
80 transform: translate(-50%, -50%) rotate(315deg);
81 }
82 @keyframes rotate {
83 0% {
84 transform: translate(-50%, -50%) rotate(0deg);
85 }
86 100% {
87 transform: translate(-50%, -50%) rotate(360deg);
88 }
89 }
90</style>
91</head>
92<body>
93 <div class="flower">
94 <div class="center"></div>
95 <div class="petal"></div>
96 <div class="petal"></div>
97 <div class="petal"></div>
98 <div class="petal"></div>
99 <div class="petal"></div>
100 <div class="petal"></div>
101 <div class="petal"></div>
102 </div>
103</body>
104</html>