Introduction
This tutorial will try to guide you through the steps to create a 3D-like, explosions in sky or billboard-based clouds. There are a few advanced topics, mainly how 3D transformations via CSS properties work. If you want to find more information, this is a nice place to begin.
If you’re in a hurry, just check the final result.
The tutorial is divided into sections, each with a different step to understand and follow the process, with HTML, CSS and Javascript blocks. Each step is based on the previous one, and has a link to test the code. The code in the tutorial is a simplified version of the demos, but the main differences are documented on every section.
HTML
First, we need two div elements: viewport and world. All the rest of the elements will be dynamically created.
Viewport covers the whole screen and acts as the camera plane. Since in CSS 3D Transforms there is no camera per se, think of it as a static sheet of glass through which you see a world that changes orientation relative to you. We’ll position all our world objects (or scene) inside it, and that’s what will be transformed around.
World is a div that we are going to use to anchor all our 3D elements. Transforming (rotating, translating or scaling) world will transform all our elements. For brevity and from here on, I’m using non-prefixed CSS properties. Use the vendor prefix (-webkit, -moz, -o, -ms, etc.) where appropriate.
This is all the markup we’ll need:
<div id="viewport"> <div id="world"></div> </div>
CSS
These next are our two CSS definitions. It’s very important to center the div that contains our scene (world in our case) in the viewport, or the scene will be rendered with an offset! Remember that you are still rotating an element that is positioned inside the document, exactly like any other 2D element.
#viewport {
-webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
background-image: linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
background-image: -o-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
background-image: -moz-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
background-image: -webkit-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
background-image: -ms-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.28, rgb(69,132,180)),
color-stop(0.64, rgb(31,71,120))
);
}
#world {
position: absolute;
left: 50%;
top: 50%;
margin-left: -256px;
margin-top: -256px;
height: 512px;
width: 512px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
pointer-events: none;
}
CSS For Adding Clouds Base
Now we start adding real 3D content. We add some new div which are positioned in the space, relatively to world. It’s esentially adding several absolute-positioned div as children of world, but using translate in 3 dimensions instead of left and top. They are centered in the middle of world by default. The width and height don’t really matter, since these new elements are containers for the actual cloud layers. For commodity, it’s better to center them (by setting margin-left and margin-top to negative half of width and height).
.cloudBase {
position: absolute;
left: 256px;
top: 256px;
width: 20px;
height: 20px;
margin-left: -10px;
margin-top: -10px
}
CSS for Clouds Layer
Now things start getting interesting. We add several absolute-positioned .cloudLayer div elements to each .cloudBase. These will hold our cloud textures.
.cloudLayer {
position: absolute;
left: 50%;
top: 50%;
width: 256px;
height: 256px;
margin-left: -128px;
margin-top: -128px;
-webkit-transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
jQuery (JavaScript)
We add generate() and createCloud() functions to populate world. Note that random_{var} are not real variables but placeholder names for the real code, which should return a random number between the specified range.
var layers = [],
objects = [],
textures = [],
world = document.getElementById( 'world' ),
viewport = document.getElementById( 'viewport' ),
d = 0,
p = 400,
worldXAngle = 0,
worldYAngle = 0,
computedWeights = [];
viewport.style.webkitPerspective = p;
viewport.style.MozPerspective = p;
viewport.style.oPerspective = p;
textures = [
{ name: 'white cloud', file: 'cloud.png' , opacity: 1, weight: 0 },
{ name: 'dark cloud', file: 'darkCloud.png' , opacity: 1, weight: 0 },
{ name: 'smoke cloud', file: 'smoke.png' , opacity: 1, weight: 0 },
{ name: 'explosion', file: 'explosion.png' , opacity: 1, weight: 0 },
{ name: 'explosion 2', file: 'explosion2.png' , opacity: 1, weight: 0 },
{ name: 'box', file: 'box.png' , opacity: 1, weight: 0 }
];
function setTextureUsage( id, mode ) {
var modes = [ 'None', 'Few', 'Normal', 'Lot' ];
var weights = { 'None': 0, 'Few': .3, 'Normal': .7, 'Lot': 1 };
for( var j = 0; j < modes.length; j++ ) {
var el = document.getElementById( 'btn' + modes[ j ] + id );
el.className = el.className.replace( ' active', '' );
if( modes[ j ] == mode ) {
el.className += ' active';
textures[ id ].weight = weights[ mode ];
}
}
}
setTextureUsage( 0, 'Few' );
setTextureUsage( 1, 'Few' );
setTextureUsage( 2, 'Normal' );
setTextureUsage( 3, 'Lot' );
setTextureUsage( 4, 'Lot' );
generate();
function createCloud() {
var div = document.createElement( 'div' );
div.className = 'cloudBase';
var x = 256 - ( Math.random() * 512 );
var y = 256 - ( Math.random() * 512 );
var z = 256 - ( Math.random() * 512 );
var t = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px )';
div.style.webkitTransform = t;
div.style.MozTransform = t;
div.style.oTransform = t;
world.appendChild( div );
for( var j = 0; j < 5 + Math.round( Math.random() * 10 ); j++ ) {
var cloud = document.createElement( 'img' );
cloud.style.opacity = 0;
var r = Math.random();
var src = 'troll.png';
for( var k = 0; k < computedWeights.length; k++ ) {
if( r >= computedWeights[ k ].min && r <= computedWeights[ k ].max ) {
( function( img ) { img.addEventListener( 'load', function() {
img.style.opacity = .8;
} ) } )( cloud );
src = computedWeights[ k ].src;
}}
cloud.setAttribute( 'src', src );
cloud.className = 'cloudLayer';
var x = 256 - ( Math.random() * 512 );
var y = 256 - ( Math.random() * 512 );
var z = 100 - ( Math.random() * 200 );
var a = Math.random() * 360;
var s = .25 + Math.random();
x *= .2; y *= .2;
cloud.data = {x: x, y: y, z: z, a: a, s: s, speed: .1 * Math.random()};
var t = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px ) rotateZ( ' + a + 'deg ) scale( ' + s + ' )';
cloud.style.webkitTransform = t;
cloud.style.MozTransform = t;
cloud.style.oTransform = t;
div.appendChild( cloud );
layers.push( cloud ); }
return div;
function generate() {
objects = [];
if ( world.hasChildNodes() ) {
while ( world.childNodes.length >= 1 ) {
world.removeChild( world.firstChild );
}
}
computedWeights = [];
var total = 0;
for( var j = 0; j < textures.length; j++ ) {
if( textures[ j ].weight > 0 ) {
total += textures[ j ].weight;
}
}
var accum = 0;
for( var j = 0; j < textures.length; j++ ) {
if( textures[ j ].weight > 0 ) {
var w = textures[ j ].weight / total;
computedWeights.push( {
src: textures[ j ].file,
min: accum,
max: accum + w
} );
accum += w;
}
}
for( var j = 0; j < 5; j++ ) {
objects.push( createCloud() );
}
}
Result
For the final effect, we fill cloudLayer div for an img with a cloud texture. The textures should be PNG with alpha channel to get the effect right.
Conclusion
Of course, you can use any texture or set of textures you want: smoke puffs, plasma clouds, green leaves, flying toasters… Just change the background-image that a specific kind of cloud layer uses. Mixing different textures in different proportions gives interesting results.
Adding elements in random order is fine, but you can also create ordered structures, like trees, duck-shaped clouds or complex explosions. Try following a 3D curve and create solid trails of clouds. Create a multiplayer game to guess the shape of a 3D cloud. The possibilities are endless!
I hope it’s been an interesting tutorial and not too hard to follow.
I hope you like the result and don’t hesitate to share your thoughts about it. Thanks for reading!
Posted by: Dhiraj kumar
HTML5, CSS3, JQuery Tips & Tricks 