Shapes & solids 13 CSS 3D effects

Shapes & solids

Rotating cube

Pure CSS

Six faces placed with rotate + translateZ, spun by a single keyframe animation.

Shapes & solids

Pyramid

Pure CSS

Triangles cut with clip-path, leaned inward by exactly the angle that makes the tips meet.

Shapes & solids

Cylinder

Pure CSS

CSS has no curves in 3D, so a cylinder is 24 flat strips. Sass computes the strip width.

Shapes & solids

Spinning coin

Pure CSS

Two faces plus a stack of thin discs between them to fake a solid edge.

Shapes & solids

Wireframe globe

Pure CSS

Nine circles rotated around the Y axis make the meridians; one laid flat is the equator.

Shapes & solids

Atom orbits

Pure CSS

Three rings tilted into different planes, each spinning inside its own plane.

Shapes & solids

Exploded layers

Pure CSS

Isometric plates lifting apart along the Z axis, each driven by one custom property.

Shapes & solids

Exploding cube

Pure CSS

Hover to blow the faces apart. One custom property moves all six.

Shapes & solids

Radio-button cube

Pure CSS

Interactive with no JavaScript: checked radios steer the cube through sibling selectors.

Shapes & solids

Drag-to-rotate cube

CSS + JS

Drag to spin it, release to let it coast. JS only tracks two angles and some inertia.

Shapes & solids

Dice roll

CSS + JS

JS picks a random face and adds full turns; a CSS transition does the tumbling.

Shapes & solids

Point sphere

CSS + JS

JS places the dots on a Fibonacci sphere once; the spin itself is a plain CSS animation.

Shapes & solids

Scroll-linked spin

CSS + JS

Scroll inside the box. JS turns scroll progress into one number; CSS maps it to rotation.