Ajax Loader
×

CSS 3D World

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:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    CSS 3D World

    CSSDeck G+