Character Modeling in CSS
summary
Five clear steps turn flat divs into a working 3D model: build cubes from nested elements and use transform-style: preserve-3d with perspective, place a lamp on top for consistent shading, define joints with transform-origin and nested skeletons, animate with keyframes driven by custom properties, and mask/shape faces with clip-path polygon plus gradients and SVG filter noise for realism. A humanlike character is produced, walks and runs, and the demo is posted and functioning.
AI-written summary · about
chapters (29)
- 0:00CSS character modeling intro
- 1:29Is it CSS? Audience game
- 3:16Julia’s CSS to 3D journey
- 7:495 steps to 3D CSS character
- 8:11Defining 3D objects and cube
- 10:42Building a cube with HTML/CSS
- 11:51Understanding 3D transforms
- 13:58Adding faces and colors
- 14:40Fox from multiple cubes
- 15:01Setting up light source
- 17:08Shadows with clip-path/gradients
- 18:59Gradients for smooth shadows
- 21:10Human skeleton in CSS
- 21:53Nesting for 3D animation
- 23:18Why nesting matters
- 25:29Defining joints with transform-origin
- 26:51Overlapping for smoother joints
- 28:38Animating with keyframes
- 30:20Simplify animation with custom props
- 31:03Keyframes for walking
- 33:34Sculpting body with cubes
- 34:17Cutting edges to smooth
- 36:02Creating chains for limbs
- 37:28Refining shape with elements
- 38:09Coloring with mixed colors
- 39:11Adding noise for texture
- 40:16SVG filters for depth
- 41:47Final demo and reflection
- 42:49Q&A
related talks
30mCharacter Modeling in CSS
37mUnfolding the Box Model
26mCSS 5DX
40m3D Transforms and Poly... What?
25mBring Your Applications to Life with 3D CSS Animations
29mComplex Geometry in HTML!
33mAnimation Studio Power Techniques with CSS
12mOutline and Detail: A Semantic-Driven Framework for Layered 2D Character Generation