model output
Gemini 3 Flash Preview

Only CSS: Caterpillar
A 0.60T 0.32
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>3D Rotating Film Strip Animation</title>
7    <style>
8        /* 
9         * Recreating the 3D isometric-style rotation of a stylized film strip.
10         * The colors, timing, and perspective are matched to the provided video frames.
11         */
12
13        :root {
14            --blue: #00AEEF;
15            --dark: #051923;
16            --bg: #FFFFFF;
17        }
18
19        * {
20            box-sizing: border-box;
21        }
22
23        body {
24            margin: 0;
25            padding: 0;
26            width: 100vw;
27            height: 100vh;
28            display: flex;
29            justify-content: center;
30            align-items: center;
31            background-color: var(--bg);
32            overflow: hidden;
33        }
34
35        /* Perspective container to provide 3D depth */
36        .scene {
37            perspective: 1000px;
38            display: flex;
39            justify-content: center;
40            align-items: center;
41            width: 100%;
42            height: 100%;
43        }
44
45        /* The main strip assembly */
46        .film-strip {
47            position: relative;
48            width: 320px;
49            height: 76px; /* 12px (notch) + 4px (gap) + 44px (blue) + 4px (gap) + 12px (notch) */
50            display: flex;
51            flex-direction: column;
52            transform-style: preserve-3d;
53            /* 
54             * Initial tilt matches the frame 00:00.000 (roughly 45 degrees).
55             * The rotation follows a linear path to match the constant speed in the video.
56             */
57            animation: rotateFull 6s linear infinite;
58        }
59
60        /* Top and bottom dark segmented bands */
61        .notches {
62            height: 12px;
63            width: 100%;
64            background-image: repeating-linear-gradient(
65                to right,
66                var(--dark) 0px,
67                var(--dark) 18px,
68                transparent 18px,
69                transparent 24px
70            );
71        }
72
73        /* Central bright blue band */
74        .center-band {
75            flex: 1;
76            background-color: var(--blue);
77            margin: 4px 0; /* Creates the small white separation visible in the animation */
78        }
79
80        /* 
81         * The animation rotates the plane around the vertical (Z) axis 
82         * while keeping the horizontal (X) tilt constant for an isometric look.
83         */
84        @keyframes rotateFull {
85            0% {
86                transform: rotateX(68deg) rotateZ(45deg);
87            }
88            100% {
89                transform: rotateX(68deg) rotateZ(405deg);
90            }
91        }
92
93        /* Optional: Adding a slight shadow or depth could be done here, 
94           but the original video is very flat and clean. */
95
96    </style>
97</head>
98<body>
99
100    <div class="scene">
101        <div class="film-strip">
102            <!-- Top notch row -->
103            <div class="notches"></div>
104            
105            <!-- Main blue core -->
106            <div class="center-band"></div>
107            
108            <!-- Bottom notch row -->
109            <div class="notches"></div>
110        </div>
111    </div>
112
113    <script>
114        /**
115         * The animation is purely CSS-driven for maximum performance and accuracy.
116         * The 6-second duration ensures a smooth, continuous loop similar to the 
117         * provided footage, where the strip passes through horizontal and slanted 
118         * states at fixed intervals.
119         */
120    </script>
121</body>
122</html>