Испытание: таинственная карта [10/32] 100%

body {
width: 550px;
height: 400px;
margin: 0;
padding: 0;
}

.map {
width: 400px;
height: 200px;
margin: 0 auto;
}

.map img {
float: left;
margin: 0;
padding: 0;
}

.part-t,
.part-h,
.part-b,
.part-o {
transform: rotate(-90deg);
}

.part-q,
.part-u,
.part-c,
.part-i {
transform: rotate(90deg);
}

.part-g,
.part-n,
.part-s,
.part-a {
transform: rotate(180deg);
}

Нигде, они просто идут по порядку слева-направо, сверху вниз. 1-ая по счету буква в html это самый левый верхний квадрат, вторая - это квадрат справа от него и т.д.

Ещё вариант с гридами)

body {
  width: 550px;
  height: 400px;
  margin: 0;
  padding: 0;
}

.map {
  width: 400px;
  height: 200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-areas: "t h e q"
                       "u i c k"
                       "b r o w"
                       "n g a s";
}
.map img {
  float: left;
  margin: 0;
  padding: 0;
}
.part-c {
  grid-area: c;
  }
.part-o {
  grid-area: o;
  }
.part-w {
  grid-area: w;
  }
.part-h {
  grid-area: h;
  }
.part-e {
  grid-area: e;
  }
.part-s {
  grid-area: s;
  }
.part-i {
  grid-area: i;
  }
.part-n {
  grid-area: n;
  }
.part-g {
  grid-area: g;
  }
.part-b {
  grid-area: b;
  }
.part-u {
  grid-area: u;
  }
.part-r {
  grid-area: r;
  }
.part-q {
  grid-area: q;
  }
.part-t {
  grid-area: t;
  }
.part-a {
  grid-area: a;
  }
.part-k {
  grid-area: k;
  }
.part-g, .part-n, .part-s, .part-a {
  transform: rotate(180deg);
  }
.part-t, .part-b, .part-h, .part-o {
  transform: rotate(-90deg);
  }
.part-q, .part-u, .part-i, .part-c {
  transform: rotate(90deg);
  }