CSS 3D World

GeckoTang

• 16129
• 13
• 2

I made this Pure CSS 3D World that uses no Javascript. The buildings are created using five faces or sides of a cuboid. These faces are positioned correctly by using CSS 3D transform properties like translate and rotate3D. These buildings are then given a texture by using data:URI as the background image of the faces of the buildings.

The rotation of the whole world is done by using animation and keyframes. Take a look at the code to check how's everything happening.

Related:

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