X

CSS3D Clouds

An experiment on creating volumetric 3d-like clouds with CSS3 3D Transforms and a bit of Javascript.

Check out the tutorial here!

Move the mouse to rotate around and mouse wheel to zoom in and out. Hit space to generate a new cloud. Works on Firefox (faster if Nightly), Chrome and Safari.

Generate clouds Show controls Go fullscreen

Texture list

Select one or more textures to create clouds. The more the merrier! Click Generate to update.

    Presets

    Clouds Storm Boom Michael Bay

    Credits

    Coded by Jaume Sánchez (@thespite)
    Code available in GitHub

    Inspired on Mr.doob's WebGL clouds and
    Mark J. Harris' Real-Time Cloud Rendering for Games.

    Fonts Open Sans and Lato are from Google Web Fonts.
    Textures are property of their respective owners.