3D Transforms and Poly... What?
summary
Explains how to compute edge lengths and face angles with trig to build regular polyhedra purely with CSS transforms, showing a cube made from six pyramids, a 12‑face romic dodecahedron, and exploding/recombining animations that rotate faces 180° and translate along local axes. Uses transform-style: preserve-3d, layered keyframes and skew/scale math (cosine scaling, cosine 60° = 0.5) to keep faces equal. Demos run in CSS only; a few slides glitch but the animations work.
AI-written summary · about
chapters (21)
- 0:00Intro
- 0:30Polyhedra
- 3:45Polygons
- 5:12Rectangles
- 5:56CSS Recap
- 8:11Skew Transform
- 9:10Trigonometry
- 10:15Skew
- 12:28Circle Circumcircle
- 14:09Triangles
- 20:10Circumcircle
- 21:19Base
- 23:06Pyramid
- 24:07Pyramid Tube
- 26:40Base Face
- 27:01Rotate
- 28:45Grain Gain
- 29:08Slides
- 29:44Transform Style
- 31:49Transform Star
- 35:01Final Result
