3d text with perspective

by TastyBytes

HTML

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h1 class="threeDee">TastyBytes.net</h1>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h1 class="threeDee">TastyBytes.net</h1>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h1 class="threeDee">TastyBytes.net</h1>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h1 class="threeDee">TastyBytes.net</h1>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h1 class="threeDee">TastyBytes.net</h1>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h1 class="threeDee">TastyBytes.net</h1>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h1 class="threeDee">TastyBytes.net</h1>
<br /><br /><br...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 800);
 body {
    padding: 0px;
    background: #7bc70f
}
h1.threeDee {
    text-align: center;
    font-family:'Open Sans', 'arial black', helvetica, arial, sans-serif;
    font-weight: 800;
    font-size: 90px;
    color: #f2f2f2;
    letter-spacing: .1em;
    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
 *************************************************/
class threeDeeify {
    // Defaults

    useMouse = 1; // React to mouse movement or window size?
    useMouseAsLight = 0, // If using the mouse, should the mouse be the "source of light"
		useScroll = 1,

    shadows = [ // An array of the shadow values NOT including the horizontal shift
    '1px 0 #cccccc',
        '2px 0 #bbbbbb',
        '3px 0 #aaaaaa',
        '4px 0 #a7a7a7',
        '5px 0 #999999',
        '6px 0 #969696',
        '7px 0 #929292'

    ],
    extraShadows: [ // for a base shadow and not a 3D effect 
    '7px 8px rgba(25,25,25,.8)',
        '7px 15px rgba(0,0,0,.2)'],
    scale: 30,
    windowWidth: window.innerWidth,

    containers: null,
    letters: [],

    init: function (options) {

        this.containers = document.getElementsByClassName('threeDee');
        this.process();
        if (!this.useMouse) {
            document.body.onresize = this.render.bind(this);
        } else {
            window.onmousemove = this.render.bind(this);
        }
    },
    process: function (item) {
        for (var x = 0; x < this.containers.length; x++) {
            // Get the text and split it into indvidual characters
            var item = this.containers[x]
            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 =...