Теория
Теория

Испытание: таинственная карта

У поверженного монстра Пендальф обнаруживает клочки карты. На обратной стороне одного из них написано: «Штаб-квартира древнего зла». Пендальф раздумывает и решает наведаться в гости сразу к главарю, чтобы прекратить всё это безобразие и не шататься больше по сырым пещерам. На мгновение волшебник представил как должны сложиться кусочки в единое целое, и теперь нужно собрать эти клочки вручную.

Тем временем по пещере начал распространяться быстрый бурый газ...

Подсказка: достаточно использовать только transform: rotate, а фрагменты карты расставить в HTML в нужном порядке.

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

<!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">
      <img class="part-h" src="map/h.jpg">
      <img class="part-e" src="map/e.jpg">
      <img class="part-q" src="map/q.jpg">
      <img class="part-u" src="map/u.jpg">
      <img class="part-i" src="map/i.jpg">
      <img class="part-c" src="map/c.jpg">
      <img class="part-k" src="map/k.jpg">
      <img class="part-b" src="map/b.jpg">
      <img class="part-r" src="map/r.jpg">
      <img class="part-o" src="map/o.jpg">
      <img class="part-w" src="map/w.jpg">
      <img class="part-n" src="map/n.jpg">
      <img class="part-g" src="map/g.jpg">
      <img class="part-a" src="map/a.jpg">
      <img class="part-s" src="map/s.jpg">
    </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-c {
  transform: rotate(90deg);
}

.part-e {
  transform: rotate(0deg);
}

.part-h {
  transform: rotate(-90deg);
}

.part-i {
  transform: rotate(90deg);
}

.part-q {
  transform: rotate(90deg);
}

.part-t {
  transform: rotate(-90deg);
}

.part-u {
  transform: rotate(90deg);
}

.part-g {
  transform: rotate(180deg);
}

.part-a {
  transform: rotate(180deg);
}

.part-n {
  transform: rotate(180deg);
}

.part-w {
  transform: rotate(0deg);
}

.part-s {
  transform: rotate(180deg);
}

.part-b {
  transform: rotate(-90deg);
}

.part-r {
  transform: rotate(0deg);
}

.part-o {
  transform: rotate(-90deg);
}

Минимальный вид табов

index.html

HTML

Испытание: таинственная карта

Притормози, дружище