10 February 2013

Create 3D Clouds in CSS


Advertise here with BSA




This tutorial will show you how to use 3D transforms in CSS to create sprite-based realistic 3D clouds. More information on 3D transforms can be found here.



The example can be customized using different types of textures and adjusting them on four levels. Using these you can obtain normal white 3D clouds, dark gray storm clouds and dark lighting storm ones.


Texture levels


3D Clouds Texture Levels


Normal clouds preview


3D Clouds


Storm clouds preview


3D Sotrm Clouds


Lighting Storm clouds preview


3D Lighting Storm Clouds


Demo


A fully functional demo of the CSS3 3D clouds can he found here.


Source


You can view the 3D clouds tutorial here.