CodePen Embed - isometric city

<body>
  <div class="world">
    <div class="map">
      <div class="floor floor--top">

      </div>
      <div class="floor floor--front"></div>
      <div class="floor floor--side"></div>
      <div class="roof--1">
        <div class=" roof--1--top"></div>
        <div class="roof--1--front"></div>
        <div class="roof--1--side"></div>
      </div>
      <div class="building--1 ">
        <div class=" building--1--top"></div>
        <div class="building--1--front">
          <div class="building--1--front-deco">
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
          </div>
        </div>
        <div class="building--1--side">
          <div class="building--1--side-deco">
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
          </div>
        </div>
      </div>
      <div class="roof--2">
        <div class=" roof--2--top"></div>
        <div class="roof--2--front"></div>
        <div class="roof--2--side"></div>
      </div>
      <div class="building--2 ">
        <div class=" building--2--top"></div>
        <div class="building--2--front">
          <div class="building--2--front-deco">
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
          </div>
        </div>
        <div class="building--2--side">
          <div class="building--2--side-deco">
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
          </div>
        </div>
      </div>

      <div class="green-zone--1 ">
        <div class="green-zone--1--top"></div>
        <div class="green-zone--1--front"></div>
        <div class="green-zone--1--side"></div>
      </div>
      <div class="tree-bark-1">
        <div class="tree-bark-1--top"></div>
        <div class="tree-bark-1--front"></div>
        <div class="tree-bark-1--side"></div>
      </div>
      <div class="tree-branch-1">
        <div class="tree-branch-1--top"></div>
        <div class="tree-branch-1--front"></div>
        <div class="tree-branch-1--side"></div>
      </div>
      <div class="tree-bark-2">
        <div class="tree-bark-2--top"></div>
        <div class="tree-bark-2--front"></div>
        <div class="tree-bark-2--side"></div>
      </div>
      <div class="tree-branch-2">
        <div class="tree-branch-2--top"></div>
        <div class="tree-branch-2--front"></div>
        <div class="tree-branch-2--side"></div>
      </div>
      <div class="tree-bark-3">
        <div class="tree-bark-3--top"></div>
        <div class="tree-bark-3--front"></div>
        <div class="tree-bark-3--side"></div>
      </div>
      <div class="tree-branch-3">
        <div class="tree-branch-3--top"></div>
        <div class="tree-branch-3--front"></div>
        <div class="tree-branch-3--side"></div>
      </div>
      <div class="road--1 ">
        <div class="road--1--top road--1-path">
          <div class="road--1-dashed-line"></div>
        </div>
        <div class="road--1--front"></div>
        <div class="road--1--side"></div>
      </div>
      <div class="park-1">
        <div class="park-1--top"></div>
        <div class="park-1--front"></div>
        <div class="park-1--side"></div>
      </div>
      <div class="park-2">
        <div class="park-2--top"></div>
        <div class="park-2--front"></div>
        <div class="park-2--side"></div>
      </div>
      <div class="tree-bark-4">
        <div class="tree-bark-4--top"></div>
        <div class="tree-bark-4--front"></div>
        <div class="tree-bark-4--side"></div>
      </div>
      <div class="tree-branch-4">
        <div class="tree-branch-4--top"></div>
        <div class="tree-branch-4--front"></div>
        <div class="tree-branch-4--side"></div>
      </div>
      <div class="tree-bark-5">
        <div class="tree-bark-5--top"></div>
        <div class="tree-bark-5--front"></div>
        <div class="tree-bark-5--side"></div>
      </div>
      <div class="tree-branch-5">
        <div class="tree-branch-5--top"></div>
        <div class="tree-branch-5--front"></div>
        <div class="tree-branch-5--side"></div>
      </div>
      <div class="tree-bark-6">
        <div class="tree-bark-6--top"></div>
        <div class="tree-bark-6--front"></div>
        <div class="tree-bark-6--side"></div>
      </div>
      <div class="tree-branch-6">
        <div class="tree-branch-6--top"></div>
        <div class="tree-branch-6--front"></div>
        <div class="tree-branch-6--side"></div>
      </div>
      <div class="tree-bark-7">
        <div class="tree-bark-7--top"></div>
        <div class="tree-bark-7--front"></div>
        <div class="tree-bark-7--side"></div>
      </div>
      <div class="tree-branch-7">
        <div class="tree-branch-7--top"></div>
        <div class="tree-branch-7--front"></div>
        <div class="tree-branch-7--side"></div>
      </div>
      <div class="tree-bark-8">
        <div class="tree-bark-8--top"></div>
        <div class="tree-bark-8--front"></div>
        <div class="tree-bark-8--side"></div>
      </div>
      <div class="tree-branch-8">
        <div class="tree-branch-8--top"></div>
        <div class="tree-branch-8--front"></div>
        <div class="tree-branch-8--side"></div>
      </div>
      <div class="lac-1">
        <div class="lac-1--top"></div>
        <div class="lac-1--front"></div>
        <div class="lac-1--side"></div>
      </div>
      <div class="roof--3">
        <div class=" roof--3--top"></div>
        <div class="roof--3--front"></div>
        <div class="roof--3--side"></div>
      </div>
      <div class="building--3 ">
        <div class=" building--3--top"></div>
        <div class="building--3--front">
          <div class="building--3--front-deco">
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
          </div>
        </div>
        <div class="building--3--side">
          <div class="building--3--side-deco">
            <div class="window"></div>
            <div class="window"></div>

            <div class="window"></div>

            <div class="window"></div>
            <div class="window"></div>

          </div>
        </div>
      </div>

      <div class="building--4 ">
        <div class=" building--4--top"></div>
        <div class="building--4--front"></div>
        <div class="building--4--side">
          <div class="building--4--side-deco">
            <div class="window"></div>

          </div>
        </div>
      </div>
      <div class="roof--5">
        <div class=" roof--5--top"></div>
        <div class="roof--5--front"></div>
        <div class="roof--5--side"></div>
      </div>
      <div class="building--5 ">
        <div class=" building--5--top"></div>
        <div class="building--5--front">
          <div class="building--5--front-deco">
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
          </div>
        </div>
        <div class="building--5--side">
          <div class="building--5--side-deco">
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
          </div>
        </div>
      </div>

      <div class="roof--6">

        <div class=" roof--6--top">H</div>
        <div class="roof--6--front"></div>
        <div class="roof--6--side"></div>
      </div>
      <div class="building--6 ">
        <div class=" building--6--top"></div>
        <div class="building--6--front">
          <div class="building--6--front-deco">
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
          </div>
        </div>
        <div class="building--6--side">
          <div class="building--6--side-deco">
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
          </div>
        </div>
      </div>
      <div class="roof--7">
        <div class=" roof--7--top"></div>
        <div class="roof--7--front"></div>
        <div class="roof--7--side"></div>
      </div>
      <div class="building--7 ">
        <div class=" building--7--top"></div>
        <div class="building--7--front">
          <div class="building--7--front-deco">
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
          </div>
        </div>
        <div class="building--7--side">
          <div class="building--7--side-deco">
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
          </div>
        </div>
      </div>
      <div class="roof--8">
        <div class=" roof--8--top"></div>
        <div class="roof--8--front"></div>
        <div class="roof--8--side"></div>
      </div>
      <div class="building--8 ">
        <div class=" building--8--top"></div>
        <div class="building--8--front">
          <div class="building--8--front-deco">
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
          </div>
        </div>
        <div class="building--8--side">
          <div class="building--8--side-deco">
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
          </div>
        </div>
      </div>
      <div class="roof--9">
        <div class=" roof--9--top"></div>
        <div class="roof--9--front"></div>
        <div class="roof--9--side"></div>
      </div>
      <div class="building--9 ">
        <div class=" building--9--top"></div>
        <div class="building--9--front">
          <div class="building--8--front-deco">
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
          </div>
        </div>
        <div class="building--9--side">
          <div class="building--9--side-deco">
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
          </div>
        </div>
      </div>
      <div class="roof--10">
        <div class=" roof--10--top"></div>
        <div class="roof--10--front"></div>
        <div class="roof--10--side"></div>
      </div>
      <div class="building--10 ">
        <div class=" building--10--top">

        </div>
        <div class="building--10--front">
          <div class="building--10--front-deco">
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
          </div>
        </div>
        <div class="building--10--side">
          <div class="building--10--side-deco">
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
            <div class="window"></div>
          </div>
        </div>

      </div>
    </div>
  </div>
</body>

$top: #b9dd70;
$front: #83d281;
$side: #6aaf96;

body {
  min-height: 100vh;
  background: linear-gradient(to bottom, #d3cce3 0%, #e9e4f0 100%);
  overflow: hidden;
}

.world {
  position: relative;
  top: 90vh;
  left: 50vw;
  width: 400px;
  height: 400px;
}

.cube {
  width: 40px;
  height: 40px;
  transform-origin: 0 0;
}

.top {
  background-color: $top;
  transform: rotate(210deg) skew(-30deg) scaleY(0.864);
}

.front {
  height: 40px;
  background: #83d281;
  transform: rotate(-30deg) skewX(-30deg) translate(0, -34px) scaleY(0.864);
}

.side {
  width: 40px;
  background: #6aaf96;
  transform: rotate(90deg) skewX(-30deg) scaleY(0.864) translate(-80px, 0);
}

.map {
  position: relative;
}

.floor {
  width: 400px;
  height: 400px;
  transform-origin: 0 0;

  &--front {
    height: 40px;
    background: #83d281;
    transform: rotate(-30deg) skewX(-30deg) translate(0, -347px) scaleY(0.864);
  }
  &--side {
    width: 40px;
    background: #6aaf96;
    transform: rotate(90deg) skewX(-30deg) scaleY(0.864) translate(-442px, 0);
  }
  &--top {
    display: flex;
    justify-content: space-between;
    background-color: #fbfbf9;
    transform: rotate(210deg) skew(-30deg) scaleY(0.864) translate(0px, 0px);
  }
}

.line {
  border: 1px solid white;

  width: calc(100% / 6);
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.col {
  background-color: #e5989b;
  border: 1px solid white;
}

@mixin isometric-top($top-color, $building-x, $building-y) {
  width: $building-x;
  height: $building-y;
  background-color: $top-color;
  transform-origin: 0 0;
  transform: rotate(210deg) skew(-30deg) scaleY(0.864);
}

@mixin isometric-front($front-color, $building-x, $building-y, $building-z) {
  position: absolute;
  height: $building-z;
  width: $building-y;
  background: $front-color;
  transform-origin: 0 0;
  $offset: -$building-y + 5px;
  @debug "divider offset: #{$offset}";
  transform: rotate(-30deg) skewX(-30deg) translate(0, $offset) scaleY(0.864);
}

@mixin isometric-side($side-color, $building-x, $building-y, $building-z) {
  position: absolute;
  width: $building-z;
  height: $building-x;
  transform-origin: 0 0;
  background: $side-color;
  transform: rotate(90deg) skewX(-30deg) scaleY(0.864)
    translate(-$building-y, 0);
}

@mixin isometric-building(
  $top-color,
  $side-color,
  $front-color,
  $building-x,
  $building-y,
  $building-z
) {
  &--top {
    @include isometric-top($top-color, $building-x, $building-y);
  }
  &--front {
    @include isometric-front(
      $front-color,
      $building-x,
      $building-y,
      $building-z
    );
  }
  &--side {
    @include isometric-side($side-color, $building-x, $building-y, $building-z);
  }
}
.roof--1 {
  top: -270px;
  left: -260px;
  z-index: 6;
  position: absolute;
  @include isometric-building(white, #d9d4d4, #ebe9e9, 30px, 30px, 10px);
}

.building--1 {
  top: -250px;
  left: -260px;
  z-index: 5;
  position: absolute;
  &--front-deco {
    margin-right: auto;
    width: 80%;
    height: 90%;
    margin-top: 15%;
    margin-left: auto;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2px;
    grid-row-gap: 5px;
  }
  &--side-deco {
    width: 86%;
    height: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 5px;
  }
  @include isometric-building(white, #d9d4d4, #ebe9e9, 50px, 50px, 80px);
}
.roof--2 {
  top: -357px;
  left: -213px;
  z-index: 5;
  position: absolute;
  @include isometric-building(white, #d9d4d4, #ebe9e9, 30px, 30px, 10px);
}
.building--2 {
  top: -337px;
  left: -213px;
  z-index: 4;
  position: absolute;
  &--front-deco {
    margin-right: auto;
    width: 80%;
    height: 90%;
    margin-top: 15%;
    margin-left: auto;
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2px;
    grid-row-gap: 5px;
  }
  &--side-deco {
    width: 86%;
    height: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 5px;
  }
  @include isometric-building(white, #d9d4d4, #ebe9e9, 50px, 50px, 140px);
}

.green-zone--1 {
  top: -235px;
  left: -153px;
  z-index: 2;
  position: absolute;

  @include isometric-building(#90be6d, #d9d4d4, #ebe9e9, 50px, 200px, 0px);
}

.green-zone--1-trees {
  display: flex;
  justify-content: center;
}

.road--1 {
  top: -156px;
  left: -231px;
  z-index: 2;
  position: absolute;

  @include isometric-building(#4a4e69, #d9d4d4, #ebe9e9, 30px, 250px, 0px);
}
.road--1-path {
  display: flex;
  justify-content: center;
}

.road--1-dashed-line {
  border: 1.5px dashed white;
}

.tree-bark-1 {
  top: -285px;
  left: -143px;
  z-index: 3;
  position: absolute;

  @include isometric-building(#dda15e, #cb997e, #dda15e, 15px, 15px, 30px);
}

.tree-branch-1 {
  top: -291px;
  left: -143px;
  z-index: 4;
  position: absolute;

  @include isometric-building(#5dd39e, #1a936f, #88d498, 30px, 30px, 30px);
}

.tree-bark-2 {
  top: -311px;
  left: -98px;
  z-index: 3;
  position: absolute;

  @include isometric-building(#dda15e, #cb997e, #dda15e, 15px, 15px, 30px);
}

.tree-branch-2 {
  top: -315px;
  left: -98px;
  z-index: 3;
  position: absolute;

  @include isometric-building(#5dd39e, #1a936f, #88d498, 30px, 30px, 30px);
}

.tree-bark-3 {
  top: -337px;
  left: -53px;
  z-index: 2;
  position: absolute;

  @include isometric-building(#dda15e, #cb997e, #dda15e, 15px, 15px, 30px);
}

.tree-branch-3 {
  top: -342px;
  left: -53px;
  z-index: 2;
  position: absolute;

  @include isometric-building(#5dd39e, #1a936f, #88d498, 30px, 30px, 30px);
}

.park-1 {
  top: -23px;
  left: 5px;
  z-index: 2;
  position: absolute;

  @include isometric-building(#90be6d, #1a936f, #88d498, 265px, 100px, 0px);
}

.park-2 {
  top: -23px;
  left: 5px;
  z-index: 2;
  position: absolute;

  @include isometric-building(#90be6d, #1a936f, #88d498, 100px, 260px, 0px);
}

.lac-1 {
  top: -83px;
  left: -67px;
  z-index: 2;
  position: absolute;
  &--top {
    border-radius: 50px;
  }
  @include isometric-building(#9cfffa, #1a936f, #88d498, 100px, 60px, 0px);
}

.roof--3 {
  top: -302px;
  left: -90px;
  z-index: 6;
  position: absolute;
  @include isometric-building(white, #d9d4d4, #ebe9e9, 30px, 30px, 10px);
}

.building--3 {
  top: -282px;
  left: -90px;
  z-index: 5;
  position: absolute;
  &--side-deco {
    width: 86%;
    height: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 5px;
  }
  &--front-deco {
    margin-right: auto;
    width: 80%;
    height: 80%;
    margin-top: 15%;
    margin-left: auto;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2px;
    grid-row-gap: 5px;
  }
  @include isometric-building(white, #d9d4d4, #ebe9e9, 50px, 50px, 100px);
}

.building--4 {
  top: -182px;
  left: -39px;
  z-index: 5;
  position: absolute;
  &--side-deco {
    width: 72%;
    height: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-column-gap: 5px;
  }
  @include isometric-building(white, #d9d4d4, #ebe9e9, 50px, 50px, 30px);
}

.roof--5 {
  top: -246px;
  left: 4px;
  z-index: 6;
  position: absolute;
  @include isometric-building(white, #d9d4d4, #ebe9e9, 30px, 30px, 10px);
}

.building--5 {
  top: -226px;
  left: 4px;
  z-index: 5;
  position: absolute;
  &--side-deco {
    width: 86%;
    height: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 5px;
  }
  &--front-deco {
    margin-right: auto;
    width: 80%;
    height: 80%;
    margin-top: 15%;
    margin-left: auto;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2px;
    grid-row-gap: 5px;
  }
  @include isometric-building(white, #d9d4d4, #ebe9e9, 50px, 50px, 100px);
}

.roof--6 {
  top: -479px;
  left: 61px;
  z-index: 5;
  position: absolute;
  &--top {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-family: caliber;
    border: 1px solid #8c9296;
    text-align: center;
    color: white;
    font-family: sans-serif;
    background: #8c9191 !important;
    border-radius: 50px;
  }
  @include isometric-building(white, #d9d4d4, #ebe9e9, 50px, 50px, 10px);
}

.building--6 {
  top: -456px;
  left: 61px;
  z-index: 4;
  position: absolute;
  &--front {
    transform: rotate(-30deg) skewX(-30deg) translate(0, -70px) scaleY(0.864) !important;
  }
  &--front-deco {
    margin-right: auto;
    width: 80%;
    height: 80%;
    margin-top: 15%;
    margin-left: auto;
    display: grid;
    grid-template-rows: repeat(15, 1fr);
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 1px;
    grid-row-gap: 1px;
  }
  &--side-deco {
    margin-right: 17%;
    width: 80%;
    height: 80%;
    margin-top: 2%;
    margin-bottom: 4%;
    margin-left: auto;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(15, 1fr);
    grid-column-gap: 1px;
    grid-row-gap: 1px;
  }
  @include isometric-building(white, #d9d4d4, #ebe9e9, 80px, 80px, 300px);
}

.roof--7 {
  top: -353px;
  left: -31px;
  z-index: 3;
  position: absolute;
  @include isometric-building(white, #d9d4d4, #ebe9e9, 30px, 30px, 10px);
}

.building--7 {
  top: -333px;
  left: -31px;
  z-index: 2;
  position: absolute;
  &--side-deco {
    width: 86%;
    height: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 5px;
  }
  &--front-deco {
    margin-right: auto;
    width: 80%;
    height: 80%;
    margin-top: 15%;
    margin-left: auto;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2px;
    grid-row-gap: 5px;
  }
  @include isometric-building(white, #d9d4d4, #ebe9e9, 50px, 50px, 120px);
}

.window {
  background: #239ee8;
  width: 80%;
  height: 80%;
  margin: auto;
}

.roof--8 {
  top: -275px;
  left: 234px;
  z-index: 5;
  position: absolute;
  @include isometric-building(white, #d9d4d4, #ebe9e9, 30px, 30px, 10px);
}

.building--8 {
  top: -255px;
  left: 236px;
  z-index: 4;
  position: absolute;
  &--side-deco {
    width: 86%;
    height: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 5px;
  }
  &--front-deco {
    margin-right: auto;
    width: 80%;
    height: 80%;
    margin-top: 15%;
    margin-left: auto;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2px;
    grid-row-gap: 5px;
  }
  @include isometric-building(white, #d9d4d4, #ebe9e9, 50px, 50px, 100px);
}

.roof--9 {
  top: -285px;
  left: 185px;
  z-index: 3;
  position: absolute;
  @include isometric-building(white, #d9d4d4, #ebe9e9, 30px, 30px, 10px);
}

.building--9 {
  top: -266px;
  left: 185px;
  z-index: 2;
  position: absolute;
  &--side-deco {
    width: 86%;
    height: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 5px;
  }
  @include isometric-building(white, #d9d4d4, #ebe9e9, 50px, 50px, 80px);
}

.roof--10 {
  top: -385px;
  left: 139px;
  z-index: 3;
  position: absolute;
  @include isometric-building(white, #d9d4d4, #ebe9e9, 30px, 30px, 10px);
}

.building--10 {
  top: -366px;
  left: 139px;
  z-index: 1;
  &--side-deco {
    width: 86%;
    height: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-column-gap: 5px;
  }
  &--front-deco {
    margin-right: auto;
    width: 80%;
    height: 80%;
    margin-top: 15%;
    margin-left: auto;
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2px;
    grid-row-gap: 5px;
  }
  position: absolute;
  @include isometric-building(white, #d9d4d4, #ebe9e9, 50px, 50px, 150px);
}

.tree-bark-4 {
  top: -177px;
  left: -190px;
  z-index: 7;
  position: absolute;
  &--front {
    transform: rotate(-30deg) skewX(-30deg) translate(0, -13px) scaleY(0.864) !important;
  }

  @include isometric-building(#dda15e, #cb997e, #dda15e, 15px, 15px, 30px);
}

.tree-branch-4 {
  top: -187px;
  left: -190px;
  z-index: 7;
  position: absolute;
  &--front {
    transform: rotate(-30deg) skewX(-30deg) translate(0, -27px) scaleY(0.864) !important;
  }
  @include isometric-building(#5dd39e, #1a936f, #88d498, 30px, 30px, 30px);
}

.tree-bark-5 {
  top: -197px;
  left: -153px;
  z-index: 6;
  position: absolute;
  &--front {
    transform: rotate(-30deg) skewX(-30deg) translate(0, -13px) scaleY(0.864) !important;
  }

  @include isometric-building(#dda15e, #cb997e, #dda15e, 15px, 15px, 30px);
}

.tree-branch-5 {
  top: -208px;
  left: -154px;
  z-index: 6;
  position: absolute;
  &--front {
    transform: rotate(-30deg) skewX(-30deg) translate(0, -27px) scaleY(0.864) !important;
  }
  @include isometric-building(#5dd39e, #1a936f, #88d498, 30px, 30px, 30px);
}

.tree-bark-6 {
  top: -131px;
  left: 44px;
  z-index: 6;
  position: absolute;
  &--front {
    transform: rotate(-30deg) skewX(-30deg) translate(0, -13px) scaleY(0.864) !important;
  }

  @include isometric-building(#dda15e, #cb997e, #dda15e, 15px, 15px, 30px);
}

.tree-branch-6 {
  top: -138px;
  left: 48px;
  z-index: 6;
  position: absolute;
  &--front {
    transform: rotate(-30deg) skewX(-30deg) translate(0, -27px) scaleY(0.864) !important;
  }
  @include isometric-building(#5dd39e, #1a936f, #88d498, 30px, 30px, 30px);
}

.tree-bark-7 {
  top: -114px;
  left: 84px;
  z-index: 6;
  position: absolute;
  &--front {
    transform: rotate(-30deg) skewX(-30deg) translate(0, -13px) scaleY(0.864) !important;
  }

  @include isometric-building(#dda15e, #cb997e, #dda15e, 15px, 15px, 30px);
}

.tree-branch-7 {
  top: -119px;
  left: 87px;
  z-index: 6;
  position: absolute;
  &--front {
    transform: rotate(-30deg) skewX(-30deg) translate(0, -27px) scaleY(0.864) !important;
  }
  @include isometric-building(#5dd39e, #1a936f, #88d498, 30px, 30px, 30px);
}

.tree-bark-8 {
  top: -149px;
  left: 112px;
  z-index: 5;
  position: absolute;
  &--front {
  }

  @include isometric-building(#dda15e, #cb997e, #dda15e, 20px, 20px, 35px);
}

.tree-branch-8 {
  top: -174px;
  left: 113px;
  z-index: 5;
  position: absolute;
  &--front {
  }
  @include isometric-building(#5dd39e, #1a936f, #88d498, 40px, 40px, 35px);
}

View Compiled

This Pen is owned by Bouzaine Chamsddine on CodePen.

See more by @alchemist107 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.