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.

Texture list Select one or more textures to create clouds. The more the merrier!

Presets

Credits

Coded by Jaume Sánchez (@thespite)



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.