3d text with perspective

HTML

<h1 class="threeDee">ANGULARJS</h1>

CSS

body { padding: 0px; background: #7bc70f }
h1.threeDee {
    text-align: center;
    font: normal normal normal 90px 'arial black', helvetica, arial, sans-serif;
    color: #f2f2f2;
    letter-spacing: 5px;
    /*-webkit-text-stroke: 1px #fff;*/
    
    text-shadow: 
        0 1px 0 #cccccc,
        0 2px 0 #bbbbbb,
        0 3px 0 #aaaaaa,
        0 4px 0 #999999,
        0 5px 0 #888888,
        0 6px 0 #777777,
        0 7px 0 #666666,
        0 7px 8px rgba(25,25,25,.8),
        0 7px 15px rgba(0,0,0,.2);
}

JavaScript

/************************************************
*  Full write up coming soon at http://www.tastybytes.net
*
*  CLICK AND DRAG RESULT WINDOW BORDER (RESIZE) TO SEE FULL EFFECT
*  Watch the "perspective" change with the window/frame size
*************************************************/
threeDeeify = function() {
    // An array of the shadow values NOT including the horizontal shift
    var shadows = [
        '1px 0 #cccccc',
        '2px 0 #bbbbbb',
        '3px 0 #aaaaaa',
        '4px 0 #a7a7a7',
        '5px 0 #999999',
        '6px 0 #969696',
        '7px 0 #929292'
        
    ];
    var extraShadows = [ // for a base shadow and not a 3D effect 
        '7px 8px rgba(25,25,25,.8)',
        '7px 15px rgba(0,0,0,.2)'
    ];
    
    var scale = 8;
    var windowWidth = window.innerWidth;
    var windowCenter = windowWidth / 2;
    
    var containers = document.getElementsByClassName('threeDee');
    for ( var x = 0; x < containers.length; x++ ) {
        var item = containers[x];
        (function() {
            // Get the text and split it into indvidual characters
            var contentArr = item.innerHTML.split('');
            var newContent = "";
            // Add the span tags
            var letters = item.getElementsByTagName('span');
            if ( !letters || !letters.length ) {
                for ( var y=0; y < contentArr.length; y++ ) {
                    newContent += "<span>"+contentArr[y]+"</span>";
                }
                // Add the new tags to the container so we can do calculations
                item.innerHTML = newContent;
                
                // Get the new items
                var letters = item.getElementsByTagName('span');
            }
            
            for ( var y=0; y < letters.length; y++ ) {
                // Find the position of the text container
                var diff = windowCenter - (letters[y].offsetLeft + (letters[y].offsetWidth/2));
                var dir = ( diff > 0 )? 1 :...