看过《生化危机》吗？一演到地下实验室的时候都会一段整个建筑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部分请参考下载文件中的代码。

在线预览    源码下载