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

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

После 9-го, элементы перестают двигаться по осям, но продолжают вращаться. По коду, дальше 11 не делал.

код CSS:

.part-t {
transform: translate(-300px, -200px) rotate(-90deg);
}

.part-h {
transform: translate(-200px) rotate(270deg);
}

.part-e {
transform: translate(100px, -100px);
}

.part-q {
transform: translate(100px, -200px) rotate(90deg)
}

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

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

.part-c {
transform: translate(200px, 100px);
}

.part-k {
transform: translate(300px, -100px);
}

.part-b {
transform: translate(-100px, -100px) rotate(-90deg);
}

.part-r {
transform: transplateX(-100px, -100px);
}

.part-o {
transform: transplate(100px, 200px) rotate(-90deg);
}

2

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

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

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

3 
.part-c,
.part-i,
.part-u,
.part-q{
    transform: rotate(90deg);
}
.part-s,
.part-a,
.part-g,
.part-n{
    transform: rotate(180deg);
}
.part-o,
.part-b,
.part-h,
.part-t{
    transform: rotate(270deg);
}
4 
<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: таинственная карта</title>
        <meta charset="utf-8">
        <base href="/assets/course71/">
    </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>

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-o,
.part-b,
.part-h,
.part-t {
    transform: rotate(-90deg);
}

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

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