js楼盘模型360度旋转动画效果

看过《生化危机》吗？一演到地下实验室的时候都会一段整个建筑3D旋转的效果。本插件的楼盘模型360度旋转效果就和那种效果类似。

HTML

只需要一个空的div，然后在运行时用js往里面插入需要的节点。

<div id="demo"></div>
                

JAVASCRIPT

var D = {
    base: 6,
    size: 40,
    space: 6,
    height: {
        min: 10,
        max: 80
    },
    type: ['a', 'b', 'c', 'd', 'e'],
    bldg: '',
    Random: function(min, max) {
        var value = Math.random() * (max - min) + min;
        return Math.round(value);
    },
    Build: function() {
        for (var x = 0; x < D.base; x++) {
            for (var y = 0; y < D.base; y++) {
                var e = D.data[x * D.base + y];
                var w = D.Random(D.space, D.size - D.space);
                var h = D.Random(D.space, D.size - D.space);
                var l = D.Random(D.space / 2, D.size - w);
                var t = D.Random(D.space / 2, D.size - h);
                var z = D.Random(D.height.min, D.height.max);
                var i = D.Random(0, D.type.length - 1);
                var c = e.getElementsByTagName('*');
                e.className = D.type[i];
                e.style.width = w + 'px';
                e.style.height = h + 'px';
                e.style.left = x * D.size + l + 'px';
                e.style.top = y * D.size + t + 'px';       
                c[0].style.height = z + 'px';
                c[1].style.width = h + 'px';
                c[2].style.width = w + 'px';
                c[3].style.width = h + 'px';
                c[4].style.width = h + 'px';
                c[4].style.height = w + 'px';
            }
        }
    },
    Create: function() {
        for (var i = 0; i < D.base * D.base; i++) {
            var div = document.createElement('div');
            div.innerHTML = D.bldg;
            D.demo.appendChild(div);
        }
        D.data = D.demo.getElementsByTagName('div');
    },   
    Init: function() {
        var l = D.base * D.size;
        D.demo = document.getElementById('demo');
        D.demo.style.width = D.demo.style.height = l + 'px';
        D.demo.style.marginTop = D.demo.style.marginLeft = -l / 2 + 'px';
        D.demo.addEventListener('click', D.Build, false);
    },   
    Run: function() {
        D.Init();
        D.Create();
        D.Build();
    }   
};
D.Run();
                

css部分请参考下载文件中的代码。