Several of the demos on this site link to a stylesheet called “rotation.css”. It is shown here for easy reference.

The stylesheet defines rotations for a number of fundamental symmetries (with vendor prefixes): triangular (in 120° increments), quadrilateral (90°), pentagonal (72°), hexagonal (60°), heptagonal (51.4°), octagonal (45°), nonogonal (40°), decagonal (36°), dodecagonal (30°), hexadecagonal (22.5°) and (wait for it), hexatriacontagonal (10°). Of course, some of the symmetries overlap each other, and you are unlikely to need all of them for a given project.

The defined classes use degrees as the unit of rotation, but it’s worth pointing out that you can use other units: gradians (e.g., tranform:rotate(123grad), with 400 gradians in a full circle); radians (e.g., transform:rotate(1.8573rad), with 2π radians per circle); and “turns” (e.g., transform:rotate(.5turn), with one turn per circle; turns can be incremented down to at least the thousandth place: transform:rotate(.005turn).)

3D rotations are also possible with the following syntax (with example values): transform:rotateX(45deg); transform:rotateY(200grad); transform:rotateZ(1rad). The axis of rotation is appended to the word “rotate”, so rotateZ is essentially the same as the ordinary rotate property, the z-axis being perpendicular to the page; rotateX and rotateY are the interesting ones, since a element will seem to rotate into the space above or below from the plane of the page.