Scenes & objects 26 CSS 3D effects

The 26 effects

• 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.

• 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.

• 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.

• 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.

• Scenes & objects

  Synthwave floor

  Pure CSS

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

• Scenes & objects

  Infinite tunnel

  Pure CSS

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

• Scenes & objects

  Warp starfield

  Pure CSS

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

• 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.

• HoverTap

  Scenes & objects

  Door

  Pure CSS

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

• Scenes & objects

  Laptop lid

  Pure CSS

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

• Scenes & objects

  Hanging sign

  Pure CSS

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

• Scenes & objects

  Folding map

  Pure CSS

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

• HoverTap

  Scenes & objects

  Hover tiles

  Pure CSS

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

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.