<div class="field">
	<div class="line back"></div>
	<div class="line middle"></div>
	<div class="line front"></div>
</div>

<div style="margin:0 auto; width:100px; text-align:center">
<input id="rotate" type="range" min="0" max="90" value="60" step="1">
<input id="perspective" type="range" min="200" max="1000" value="800" step="1">
	<button id="update">update</button>
</div>

$baseColor: #eee;

.field {
	background-color: $baseColor;
	transform: perspective(800px) rotateX(60deg);
	perspective-origin: left;
	transform-style: preserve-3d;
	width: 80%;
	margin: 13rem auto 0 auto;
	padding: 1rem;
	font-size: 0;

	.line {
		position: relative;
		display: flex;
		align-items:flex-end;
		height:1rem;

		.building {
			position: relative;
			width: 100%;
			height: 5rem;
			transform: rotateX(-65deg);
			transform-origin: bottom left;
			margin-left:-2px;
			
			&:before {
				content:"";
				position:absolute;
			}
			
			&.roof-1:before {
				width:50%;
				height:0.7rem;
				top:-0.5rem;
				left:0;
			}
			&.roof-2:before {
				width:50%;
				height:0.5rem;
				top:-0.2rem;
				right:0;
			}
		}

		&.back .building, &.back .building:before {
			background-color:darken($baseColor,30%);
		}

		&.middle .building, &.middle .building:before {
			background-color:darken($baseColor,20%);
		}

		&.front .building, &.front .building:before {
			background-color:darken($baseColor,10%);
		}
	}
}

function init() {
	$(".line").html("");
	var level = 3;
	$(".line").each(function() {
		for (var i = 1; i <= window.innerWidth / 25; i++) {
			let height = Math.floor(Math.random() * 5+level) + level,
			width = Math.floor(Math.random() * 5) + 2,
			roof = Math.floor(Math.random() * 2) + 1;
			let building = $("<div>")
				.addClass("building roof-"+roof)
				.css({
					height: height + "rem",
					width: width + "rem"
				});
			building.appendTo($(this));
		}
		level = level - level / 2;
	});
	rotate();
}

$("input[type=range]").on("change mousemove", rotate);

function rotate() {
	$(".field").css({
		transform:
			"perspective(" +
			$("#perspective").val() +
			"px) rotateX(" +
			$("#rotate").val() +
			"deg)"
	});

	$(".building").css({ transform: "rotateX(-" + $("#rotate").val() + "deg)" });
}

$("#update").on("click", init);

init();