Matrix

by zhouzhijun01

HTML

<script src="https://cdn.rawgit.com/mrdoob/stats.js/master/build/stats.min.js"></script>
<div class="space" id="space">
    <div class="matrix" id="matrix"></div>
</div>

<div class="box-count-control" style="display: none;">
    <select id="box-count-change"></select> Boxes
</div>

<script type="text/x-box-template" id="box-template">
    <div class="box">
        <span class="surface front"></span>
        <span class="surface back"></span>
        <span class="surface top"></span>
        <span class="surface bottom"></span>
        <span class="surface left"></span>
        <span class="surface right"></span>
    </div>
</script>

<script src="http://iceshock.net/components/stats.js/build/stats.min.js"></script>

CSS

.space {
    position: absolute;
}
.matrix {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.box {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}
.surface {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid #000;
    box-sizing: border-box;
}
.box-count-control {
    position: absolute;
    right: 5%;
    bottom: 5%;
    line-height: 12px;
    font-size: 12px;
}
.box-count-control input {
    text-align: right;
    width: 40px;
}
.transition {
    -webkit-transition: -webkit-transform 1.5s linear;
    -moz-transition: -webkit-transform 1.5s linear;
    -ms-transition: -webkit-transform 1.5s linear;
    -o-transition: -webkit-transform 1.5s linear;
    transition: -webkit-transform 1.5s linear;
}
.css-animate {
    -webkit-animation: demo-animate 1.5s linear;
    -moz-animation: demo-animate 1.5s linear;
    -ms-animation: demo-animate 1.5s linear;
    -o-animation: demo-animate 1.5s linear;
    animation: demo-animate 1.5s linear;
}
@-webkit-keyframes demo-animate {
    0% {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}

#stats { opacity: 0.6 !important; }

JavaScript

$(function(){
    // Stats.js
    var stats = new Stats();
    stats.setMode(0); // 0: fps, 1: ms
    // Align top-right
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.right = '0px';
    stats.domElement.style.top = '0px';
    document.body.appendChild( stats.domElement );
    
    // Matrix
    var $win = $(window),
        $doc = $(document),
        prefix = ['Webkit', 'Moz', 'O', 'Ms'],
        detector = $('<div>')[0],
        transform,
        perspective,
        
        canvasInfo = {

            screenHeight: 0,
            matrixSize: 0,
            perspective: 0
        },
        
        els = {
            space: $('#space'),
            matrix: $('#matrix'),
            boxTmpl: $('#box-template'),
            boxCountSelect: $('#box-count-change')
        };
  
    function ucFirst(str) {
        return str.charAt(0).toUpperCase() + str.substr(1);
    }
    for( var i=0,l=prefix.length; i<l; i++ ) {
        if ( detector.style[prefix[i]+'Transform'] !== undefined ) {
            transform = prefix[i]+'Transform';
        }
        if ( detector.style[prefix[i]+'Perspective'] !== undefined ) {
            perspective = prefix[i]+'Perspective';
        }
    }
    
    
    function newBox( size ){
        return updateBox( $( els.boxTmpl.html() ), size );
    };
    
    function updateBox( box, size ){
        return box.width( size )
        .height( size )
        .find('.front').css( transform, 'translateZ( '+ size/2 +'px)').end()
        .find('.back').css( transform, 'translateZ(-'+ size/2 +'px)').end()
        .find('.top').css( transform, 'translateY(-'+ size/2 +'px) rotateX(-90deg)').end()
        .find('.bottom').css( transform, 'translateY( '+ size/2 +'px) rotateX(-90deg)').end()
        .find('.left').css( transform, 'translateX(-'+ size/2 +'px) rotateY(-90deg)').end()
        .find('.right').css( transform, 'translateX( '+ size/2 +'px) rotateY(-90deg)').end();
    }
    
    function...