3D Transforms in CSS - Creating Complex Shapes and Animations

Explore advanced 3D transforms in CSS through this conference talk from CSS Day 2014. Delve beyond basic cube examples to create complex shapes like Archimedean, Catalan, and Johnson solids. Learn techniques for adding shading with CSS gradients, animating shapes with keyframes, and transforming objects through expansion, vertex truncation, or exploding and recombining parts. Follow along with provided slides and experiments as speaker Ana Tudor covers topics including polygons, pyramids, dodecahedrons, transform styles, and animation stages. Gain insights into creating impressive 3D effects and animations using pure CSS, with practical code examples and a final showcase of the techniques in action.

Intro
Polygons
Types of polygons
Things to remember
Lateral Edge
Pyramid Edge
Dodecahedron
Pyramids
Shallow Pyramid
Transform Style Preserve Freedom
Fixing Transform Style Preserve Freedom
Polyhedrons
Pentagon Diagonal
Animation Stages
Code
Final Result