Character Modeling in CSS
summary
Demonstrates a full 3D character built with pure HTML + CSS—no JavaScript or image assets—using stacked div faces, transform translations and rotations, and transform-style: preserve-3d to force a shared 3D space. Uses transform-origin joints for a skeletoned hierarchy, keyframe animations for walk/dance cycles, and clip-path polygon plus gradients and color-mix custom properties for shadows and sculpted surfaces. Ends with a working running/dancing girl assembled from cubes and bevels that animates in the browser.
AI-written summary · about
chapters (14)
- 0:00Introduction and game
- 1:24About the speaker
- 3:36Five steps to 3D CSS
- 5:00Creating 3D space in CSS
- 7:30Building a basic cube
- 8:33Light source in CSS
- 11:04Adding shadows
- 13:17Character skeleton
- 16:52Joints and transform origin
- 19:17Animating in 3D
- 20:46Keyframes and walking cycles
- 22:32Character mood and dance
- 23:45Sculpting a human character
- 28:26Final demo and Q&A
