Pure CSS Scenes & objects #loop

Hanging sign in pure CSS

A pendulum is just rotateX around the top edge with an ease-in-out alternate.

46 lines of CSS
5 lines of HTML
No JavaScript
No dependencies
Snippet under MIT

GitHub

How it works

A pendulum is a rotation around the point it hangs from: transform-origin: top center.
Animate rotateX from −32° to +32° with animation-direction: alternate.
ease-in-out is what makes it physical — slow at the ends of the swing, fast through the middle.
A constant rotateY in both keyframes turns the sign slightly so you can see the swing.
A delay of minus half a swing (-1.1s) starts the loop with the sign hanging straight down, so a paused sign hangs at rest in the middle of the frame instead of held up at one end of its swing.
Every length is a multiple of one base unit, --u, tied to the canvas: the sign is 220 × 190 units, so it is the same share of a gallery card, the editor and a recording canvas, and its swing toward you still stays inside the frame.

Key techniques

transform-origin: top
animation-direction: alternate
ease-in-out = pendulum

HTML 5 lines

<div class="scene">
  <div class="sign">
    <div class="board">OPEN</div>
  </div>
</div>

CSS 46 lines

.scene {
  /* one base unit: every length below is a multiple of it, so the sign is the same share of a
     gallery card, the editor, a full screen and a recording canvas */
  --u: 0.3vmin;
  display: grid;
  place-items: center;
  perspective: calc(800 * var(--u));
}

.sign {
  position: relative;
  width: calc(220 * var(--u));
  height: calc(190 * var(--u));
  transform-origin: top center;
  animation: swing 2.2s ease-in-out -1.1s infinite alternate;
}

/* rail + two cords */
.sign::before {
  content: '';
  position: absolute;
  inset: 0 calc(16 * var(--u)) auto;
  height: calc(80 * var(--u));
  border: solid #949bc0;
  border-width: calc(4 * var(--u)) calc(2 * var(--u)) 0;
}

.board {
  position: absolute;
  inset: calc(80 * var(--u)) 0 0;
  display: grid;
  place-items: center;
  border: calc(3 * var(--u)) solid #ffb547;
  border-radius: calc(12 * var(--u));
  background: #1b1408;
  color: #ffb547;
  font: 900 calc(45 * var(--u)) Inter, system-ui;
  letter-spacing: 0.12em;
  text-shadow: 0 0 calc(14 * var(--u)) #ffb547;
  box-shadow: 0 0 calc(24 * var(--u)) rgb(255 181 71 / 0.45);
}

@keyframes swing {
  from { transform: rotateY(-18deg) rotateX(-32deg); }
  to   { transform: rotateY(-18deg) rotateX(32deg); }
}

Standalone snippet · plain CSS, no build step, no dependencies.

More scenes & objects

Scenes & objects

Solar system
Pure CSS

Orbits are rings on a tilted plane, each spinning at its own speed. Every planet undoes both rotations, so it always faces the camera.

#loop #space #billboard #orbit Learn & copy
Move pointerTouch & move
Scenes & objects

Isometric city
CSS + JS

Sixteen buildings on a ground plane. Each one is a single element: the roof is lifted by translateZ and two pseudo-element walls hang down from it. The pointer turns the block.

#pointer #isometric #scene #building Learn & copy
Scenes & objects

Ferris wheel
Pure CSS

The wheel turns on Z while every cabin turns the other way by the same amount, so the cabins stay upright. Two rims at different depths give it thickness.

#loop #scene #wheel Learn & copy
Scenes & objects

Floating island
Pure CSS

A small terrain of block columns in an isometric view. Each block is one element: its top is lifted with translateZ and two pseudo-element walls hang from its edges.

#loop #isometric #scene #voxel Learn & copy
Scenes & objects

Synthwave floor
Pure CSS

A gradient-drawn grid laid flat with rotateX, scrolling toward you forever.

#loop Learn & copy
Scenes & objects

Infinite tunnel
Pure CSS

Identical frames fly from far away to past the camera on staggered negative delays.

#loop Learn & copy
Scenes & objects

Warp starfield
Pure CSS

Each layer is ONE element; its stars are box-shadows of it, written out as one list.

#loop #generated Learn & copy
Move pointerTouch & move
Scenes & objects

Depth parallax
CSS + JS

Layers sit at different translateZ depths; tilting the scene with the pointer makes them slide apart.

#pointer Learn & copy
HoverTap
Scenes & objects

Door
Pure CSS

Hover or focus to open. The light behind is just the frame’s background.

#hover Learn & copy
Scenes & objects

Laptop lid
Pure CSS

The lid hinges on the back edge. Its two sides are separate faces: shell and screen.

#loop Learn & copy
Scenes & objects

Folding map
Pure CSS

Nested panels, each hinged on its parent’s edge, folding up like a paper map.

#loop Learn & copy
HoverTap
Scenes & objects

Hover tiles
Pure CSS

Sweep across the floor. Tiles rise instantly and sink slowly, leaving a trail.

#hover Learn & copy
ClickTap
Scenes & objects

Confetti burst
CSS + JS

Click anywhere on the canvas and the confetti bursts from that very point. JS gives each piece a random 3D vector in per cent of the canvas, and one CSS animation flies them all out to its edges.

#generated #pointer Learn & copy
Move pointerTouch & move
Scenes & objects

Look around a room
CSS + JS

A box seen from the inside: floor, ceiling and three walls. The pointer rotates it around the camera position, so it feels like turning your head.

#pointer #scene #interior Learn & copy
Scenes & objects

Endless drive
Pure CSS

A road plane laid flat with rotateX(90deg). The centre line slides by exactly one dash period, and posts travel the whole road with staggered delays, so the loop never shows a seam.

#loop #scene #road #synthwave Learn & copy
Scenes & objects

Depth snowfall
CSS + JS

JS creates forty flakes once, each with a random depth, speed and drift in custom properties. One CSS animation does the falling; perspective makes near flakes big and fast.

#generated #loop #particles #scene #weather Learn & copy
Scenes & objects

Map pins
Pure CSS

A map drawn with gradients lies on a tilted plane. The pins undo the plane’s rotation around their tip, so they stand up and face you, then bounce in turn above a pulsing ring.

#loop #map #pin #billboard #scene Learn & copy
Scenes & objects

Windmill
Pure CSS

A tapered tower of four leaning trapezoids with a pyramid cap, on a grass block. The sails turn with one rotateZ loop while the whole model turns slowly, so the depth reads.

#loop #scene #building Learn & copy
Scenes & objects

Rocket launch
Pure CSS

A rocket built from strips and leaning triangles fills the frame on its pad, lifts off in a cloud of smoke and climbs out of the top of the frame, the camera following it up as the ground drops away. Then the camera pans back down to the pad, where the next rocket stands ready, so the loop has no seam. Flame and smoke are gradient layers that only scale and fade.

#loop #scene #space #cylinder Learn & copy
Scenes & objects

Lighthouse
Pure CSS

A striped tower of leaning strips on a rock in a night sea. Two long translucent planes, crossed, make each light beam; they sweep round with rotateY while a lit wedge on the water turns with them.

#loop #scene #building #night Learn & copy
Scenes & objects

Model train
Pure CSS

A toy locomotive and two wagons circle a tree on a round track. The ground is one tilted plane; the train rides a carrier that turns about the track centre, so the boxes face along the rails and stay upright with nothing to undo.

#loop #scene #train #toy #track Learn & copy
Scenes & objects

Campfire
Pure CSS

A loose pile of logs leaning into a teepee, charred and glowing at the burned ends, on a bed of ash and coals in a ring of odd stones, with flame tongues flickering out of step and embers drifting up as the ground turns slowly. Every log is a real box placed by its own custom properties, and every flame tongue is crossed planes, so the fire has volume from every side.

#loop #scene #fire #camping Learn & copy
Scenes & objects

Hot-air balloon
Pure CSS

A striped balloon bobbing and turning slowly on its ropes, with a woven basket and clouds drifting past in front of it and behind it. Each of its twelve gores is six flat panels, each tilted to follow the balloon’s outline, so the silhouette is round from every side as the stripes go by.

#loop #scene #balloon #sky Learn & copy
Scenes & objects

Aquarium
Pure CSS

A glass fish tank seen from a little above: tinted walls with water up to a bright surface line, a sand bed, swaying plants and rising bubbles. Four CSS-drawn fish swim racetrack loops round the tank, turning at the ends and passing in front of and behind each other, each loop one keyframe list of translateX, rotateY and translateZ.

#loop #scene #fish #water Learn & copy
Scenes & objects

Black hole
Pure CSS

A black hole with its accretion disk swirling round it, nearly edge on: the near half of the disk crosses in front of the dark centre, the far half goes behind it, and gravity bends the far side up over the top and down under the bottom as a glowing halo. The side turning toward you burns brighter.

#loop #space #scene #gradient Learn & copy

Laptop lid Folding map

How it works

Key techniques

Copy-paste code

HTML 5 lines

CSS 46 lines

More scenes & objects