Pure CSS 3D Primitives

Roman Liutikov

• 64901
• 7
• 0

This is a set of basic 3D primitives coded and animated in pure CSS3. Later will be more.

• Cube is pretty simple object to build.
• Pyramids faces made of thick border applied to 0x0 div.
• Both bases of the cylinder made of triangles which a coded same as pyramids faces. Every cylinders face wrapped into container, it saves a lot of time for positioning them.

To make object spinning around its axis you need to wrap it into div which must be positioned in the center of the object and then animate that container.

Here you'll find more 3D objects soon: http://romanliutikov.com/lab/

Related:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room