Word Cloud

HTML

<div id="scene">
    <div id="container"></div>
</div>

CSS

html, body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    height: 100%;
    margin: 0;    
}

#scene {
    -webkit-perspective: 600px;
    height: 100%;
    width: 100%;
}

#container {
    -webkit-transform-style: preserve-3d;
    position: absolute;
    left: 50%;
    top: 50%;
}

.word {
    text-transform: uppercase;
    position: absolute;
    color: #333;
}

JavaScript

var words = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar imperdiet elementum. Proin condimentum volutpat volutpat. Morbi nec risus leo. Mauris auctor urna sit amet dolor viverra placerat. Donec quis sem id turpis venenatis condimentum sed sit amet neque. Curabitur suscipit posuere enim vehicula dapibus. Sed ornare nec nisl in lacinia. Fusce congue porta mauris, sit amet dapibus lorem varius ut. Mauris et consequat tortor. Vivamus posuere nisi vitae fermentum imperdiet. Etiam a metus vel magna egestas eleifend ut sit amet felis. Duis eu massa vel odio consequat mattis.'.split(' ');

var SIZE_X = window.innerWidth;
var SIZE_Y = window.innerHeight;
var SIZE_Z = 2500;

var container = document.getElementById( 'container' );

for ( var i = 0; i < words.length; i++ ) {
    
    var el = document.createElement( 'div' );
    var x = SIZE_X * (Math.random() - 0.5);
    var y = SIZE_Y * (Math.random() - 0.5);
    var z = -SIZE_Z * Math.random());
    el.className = 'word';
    el.innerText = words[i];
    el.style.webkitTransform = 'translate3d('+ ~~x +'px,'+ ~~y +'px,'+ ~~z +'px)';
    container.appendChild( el );
}

// Fly
container.style.webkitTransition = '-webkit-transform 25s linear';
container.style.webkitTransform = 'translateZ(' + SIZE_Z*1.5 + 'px)';