Every one runs live, with a step-by-step explanation and code you can edit and paste into your own project.
A 3×3×3 cube built as three layers that take turns twisting a quarter turn. Each layer is one flat box with the stickers painted on by gradients.
JS picks a random face and adds full turns; a CSS transition does the tumbling.
A crown of trapezoid facets leaning 45° above the girdle and a deep pavilion of triangles below, with a glint that walks from facet to facet.
A donut made of 24 circles. Each one turns to its angle and walks out with translateX, so it stands edge-on around the hole like a slice of the tube.
Six faces placed with rotate + translateZ, spun by a single keyframe animation.
A glass pyramid with a glowing core: triangles cut with clip-path, leaned inward by exactly the angle that makes the tips meet.
A glass tube with rings of light rising inside. CSS has no curves in 3D, so the tube is 24 flat strips, each 2r × tan(180° / 24) wide.
Two faces and a band of 24 slats round the edge between them, so it is solid even edge-on.
Nine circles rotated around the Y axis make the meridians; one laid flat is the equator.
Three rings tilted into different planes, each with an electron going round inside its own plane.
Isometric plates that rest spread apart along the Z axis and close up together, each placed by one custom property.
Hover to blow the faces apart. One custom property moves all six.
Interactive with no JavaScript: checked radios steer the cube through sibling selectors.
Drag to spin it, release to let it coast. JS only tracks two angles and some inertia.
JS places the dots on a Fibonacci sphere once; the spin itself is a plain CSS animation.
Scroll inside the box. JS turns scroll progress into one number; CSS maps it to rotation.
Six side panels in a closed ring plus two hexagon caps cut with clip-path. The apothem, (side / 2) / tan(30°), is how far each panel steps out.
Eight triangles hinged on a square equator, leaning in by 35.26° so they meet at two apexes. One rule builds all of them: scaleY(-1) flips the bottom four.
Sixteen thin triangles on a circle, each leaning in by atan(radius / height) so all the tips meet on the axis, over a flat disc base.
Every tread is the same flat slab pivoting on the pole. One index turns it 30° further and lifts it one step higher: that is the whole spiral.
Sixteen cubes seen isometrically, rising and falling in a wave that travels along the diagonals. Each cube is one element: its top plus two folded pseudo-element sides.
A cube’s cross-shaped net lies open on a floor, folds up into a cube that turns a full circle, and opens flat again. The lid hangs off a wall, so its hinge rides along with the wall’s: nested transforms compound. The camera moves in as it folds, so the cube is as big as the net.
Pick 3 to 12 sides. JS rebuilds the panels and computes the apothem and side length with cos() and sin(); CSS places every panel from those numbers.
Four equilateral triangles: three hinged on the edges of the fourth and leaned in by 19.47°, the angle at which their tips meet. A glowing core turns back against the tumble to stay round.
Two glass cones tip to tip; the sand is one cone shrinking toward the neck while an identical one grows on the floor. Turned half over, it looks exactly as it started, so the loop has no seam.
Five hexagonal prisms of different sizes growing from one rock at different tilts. Each side panel carries its own tip facet as a ::before, folded in so the six meet in a point.
A 3×3×3 wireframe: three layers of bars and glowing nodes, and nine posts through them. The outer layers move apart while the posts stretch by the same amount, so no joint ever opens.
Eleven latitude discs stack into a banded sphere around a shaded disc that always faces you. That disc cuts the rings in half, so their far side slips behind the planet while a moon circles through.
A thick eight-tooth gear driving a smaller five-tooth one the other way. Each face is one clip-path polygon, and every straight edge of it gets a standing rectangle, so the gear has a real rim and real teeth.
A ten-turn coil spring on a stand throws a ball into the air, catches it and squeezes down under it. Each half-turn of wire is one flat half-ring laid in 3D and tilted by the pitch, so the coil is a real helix, and one scaleY from its base compresses all of it at once.
A level-1 Menger sponge turning slowly, nodding so each square tunnel lines up with your eye and you see straight through. Twenty small cubes are drawn as just 18 surfaces: six masked outer faces with a real hole each, and twelve tunnel walls, with the next level painted on as pits.