skopp · January 19, 2013 13:49
diff --git a/index.html b/index.html
 <!-- See example at http://bl.ocks.org/3758852 -->
 <html>
  <head>
    <title>Isometric Test</title>
    <style>
      .board {
        -webkit-transform:matrix(1,-0.6, 1,0.6, 0,0);
        -moz-transform:matrix(1,-0.6, 1,0.6, 0,0);
        -o-transform:matrix(1,-0.6, 1,0.6, 0,0);
        transform:matrix(1,-0.6, 1,0.6, 0,0);
        margin: auto;
        width: 350px;
        margin-top: 120px;
      }

      .tile {
        width: 12px;
        height: 12px;
        display: inline-block;
        border: 1px solid #77B155;
      }

      .tile.odd {
        background: #8C5;
      }

      .tile.even {
        background: #7B5;
      }
    </style>
    <script>
      window.onload = function() {
        var board = document.createElement('div');
        board.className = 'board';
        document.body.appendChild(board);

        var odd = true;

        for (y = 0; y < 25; y++) {
          var row = document.createElement('div');
          row.className = 'row';
          board.appendChild(row);

          for (x = 0; x < 25; x++) {
            className = 'tile x' + x + ' y' + y + ' ';
            if (odd) {
              className += 'odd';
            } else {
              className += 'even';
            }
            odd = !odd;

            var tile = document.createElement('div');
            tile.className = className;
            row.appendChild(tile);
          }
        }
      };
    </script>
  </head>
  <body>
  </body>
 </html>
	<!-- See example at http://bl.ocks.org/3758852 -->
	<html>
	<head>
	<title>Isometric Test</title>
	<style>
	.board {
	-webkit-transform:matrix(1,-0.6, 1,0.6, 0,0);
	-moz-transform:matrix(1,-0.6, 1,0.6, 0,0);
	-o-transform:matrix(1,-0.6, 1,0.6, 0,0);
	transform:matrix(1,-0.6, 1,0.6, 0,0);
	margin: auto;
	width: 350px;
	margin-top: 120px;
	}

	.tile {
	width: 12px;
	height: 12px;
	display: inline-block;
	border: 1px solid #77B155;
	}

	.tile.odd {
	background: #8C5;
	}

	.tile.even {
	background: #7B5;
	}
	</style>
	<script>
	window.onload = function() {
	var board = document.createElement('div');
	board.className = 'board';
	document.body.appendChild(board);

	var odd = true;

	for (y = 0; y < 25; y++) {
	var row = document.createElement('div');
	row.className = 'row';
	board.appendChild(row);

	for (x = 0; x < 25; x++) {
	className = 'tile x' + x + ' y' + y + ' ';
	if (odd) {
	className += 'odd';
	} else {
	className += 'even';
	}
	odd = !odd;

	var tile = document.createElement('div');
	tile.className = className;
	row.appendChild(tile);
	}
	}
	};
	</script>
	</head>
	<body>
	</body>
	</html>