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

Курсы §22. Двумерные трансформации
22

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);
}

23

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

24

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

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);
  }
25

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

.map {
width: 400px;
height: 200px;
margin: 0 auto;
display:grid;
grid-template-columns:repeat(4, auto);
grid-template-rows:repeat(4, auto);
}

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

.part-a{
order:15;
transform:rotate(180deg);
}
.part-b{
order:9;
transform:rotate(270deg);
}
.part-c{
order:7;
transform:rotate(90deg);
}
.part-e{
order:3;
}
.part-g{
order:14;
transform:rotate(180deg);
}
.part-k{
order:8;
}
.part-n{
order:13;
transform:rotate(180deg);
}
.part-o{
order:11;
transform:rotate(270deg);
}
.part-r{
order:10;
}
.part-s{
order:16;
transform:rotate(180deg);
}
.part-q{
order:4;
transform:rotate(90deg);
}
.part-u{
order:5;
transform:rotate(90deg);
}
.part-i{
order:6;
transform:rotate(90deg);
}
.part-w{
order:12;
}
.part-h{
order:2;
transform:rotate(270deg);
}
.part-t{
order:1;
transform:rotate(270deg);
}