3D Transforms
summary
Builds regular and truncated polyhedra with plain CSS transforms and gradients, computes exact trig (in Sass) for circumradius/inradius and face angles, and animates pieces via keyframes — example: a pentakus dodecahedron that explodes into an excavated dodecahedron and recombines. Gives counts (dodecahedron ≈ 20 vertices, 30 edges, 160 diagonals), handles skew/scale math, and demonstrates working demos on CodePen while warning that preserve-3d doesn't work in IE so nesting transforms can appear flattened.
AI-written summary · about
chapters (16)
- 0:00Intro
- 2:23Polygons
- 5:01Types of polygons
- 13:25Things to remember
- 27:37Lateral Edge
- 29:17Pyramid Edge
- 30:23Dodecahedron
- 30:59Pyramids
- 31:28Shallow Pyramid
- 34:00Transform Style Preserve Freedom
- 35:22Fixing Transform Style Preserve Freedom
- 38:27Polyhedrons
- 39:14Pentagon Diagonal
- 42:02Animation Stages
- 42:55Code
- 46:07Final Result
