Rotating tile animation

This uses HTML, CSS, and JavaScript to create an interesting background animation. This version features random square rotation, random colors, random colors on rotation, resize listener, and fill screen.

HTML

<div id="superSquareContainer">
    <div id="squareContainer"></div>
</div>

CSS

/*Created by William Green (15) in California*/
/*Email [email protected] with any questions*/
html, body {
    height:100%;
    width:100%;
    padding:0;
    margin:0;
}
.animatedTile {
    transition:all 1.5s ease;
    -moz-transition:all 1.5s ease;
    -webkit-transition:all 1.5s ease;
    -ms-transition:all 1.5s ease;
    transition:all 1.5s ease;
    width:30px;
    height:30px;
    display:inline-block;
    margin-bottom:-5px;
    background-color:red;
    border:1px solid #fff;
    -o-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}
#superSquareContainer {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width:100%;
}
#squareContainer {
    display:table;
    margin:auto;
    overflow:hidden;
}

JavaScript

window.onload = function () {
    var height, width;
    var colors = ['#00ACEC', '#C257CD', '#32D0C4', '#BB9561', '#E43E28', '#98E455'];
    reset();
    function reset() {
        height = window.innerHeight;
        width = window.innerWidth;
        var squareX = Math.floor(width / 30);
        var squareY = Math.floor(height / 30);
        document.getElementById('squareContainer').innerHTML = '';
        for (var i = 0; i != squareX * squareY; i++) {
            var randomColor = colors[Math.floor(Math.random() * colors.length)];
            var newSquare = document.createElement('div');
            newSquare.className = 'animatedTile';
            newSquare.style.backgroundColor = randomColor;
            newSquare.setAttribute('data-rotation','0');
            document.getElementById('squareContainer').appendChild(newSquare);
        }
        document.getElementById('squareContainer').style.width = squareX * 30 + 'px';
    }
    window.onresize = function () {
        reset();
    };
    //animate the tiles
    window.setInterval(function () {
        var squares = document.getElementsByClassName('animatedTile');
        var randomSquare = squares[Math.floor(Math.random()*squares.length)];
        var currentRotation = randomSquare.getAttribute('data-rotation');
        if(currentRotation+90 == 360){
        	//this rotation will set it back to 360deg or 0deg; reset to 0deg
            randomSquare.style.oTransform = 'rotate(0deg)';
            randomSquare.style.mozTransform = 'rotate(0deg)';
            randomSquare.style.webkitTransform = 'rotate(0deg)';
            randomSquare.style.msTransform = 'rotate(0deg)';
            randomSquare.style.transform = 'rotate(0deg)';
        	randomSquare.setAttribute('data-rotation','0');
        }
        else{
            var newRotation = parseInt(currentRotation)+90;
         	randomSquare.style.oTransform = 'rotate('+newRotation+'deg)';
            randomSquare.style.mozTransform =...