Испытание: таинственная карта [100%] компактный код

Курсы §22. Двумерные трансформации
1 
<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Испытание: таинственная карта</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="map">
      <img class="part-t" src="map/t.jpg" alt="part-t">
      <img class="part-h" src="map/h.jpg" alt="part-h">
      <img class="part-e" src="map/e.jpg" alt="part-e">
      <img class="part-q" src="map/q.jpg" alt="part-q">
      <img class="part-u" src="map/u.jpg" alt="part-u">
      <img class="part-i" src="map/i.jpg" alt="part-i">
      <img class="part-c" src="map/c.jpg" alt="part-c">
      <img class="part-k" src="map/k.jpg" alt="part-k">
      <img class="part-b" src="map/b.jpg" alt="part-b">
      <img class="part-r" src="map/r.jpg" alt="part-r">
      <img class="part-o" src="map/o.jpg" alt="part-o">
      <img class="part-w" src="map/w.jpg" alt="part-w">
      <img class="part-n" src="map/n.jpg" alt="part-n">
      <img class="part-g" src="map/g.jpg" alt="part-g">
      <img class="part-a" src="map/a.jpg" alt="part-a">
      <img class="part-s" src="map/s.jpg" alt="part-s">
    </div>
  </body>
</html>


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-i,
.part-c {
  transform: rotate(90deg);
}

.part-w ~ img {
  transform: rotate(180deg);
}