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


#1

`

Испытание: таинственная карта
        <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-b,
.part-o,
.part-t,
.part-h{
transform: rotate(-90deg)
}
.part-i,
.part-c,
.part-u,
.part-q
{
transform: rotate(90deg)
}
.part-n,
.part-g,
.part-a,
.part-s{
transform: rotate(180deg)
}``


#2

в вашем коде не хватает 4 рисунков


#3
    <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">

.part-c {
transform:rotate(90deg);
}
.part-o {
transform:rotate(270deg);
}
.part-w {
transform:rotate(0deg);
}
.part-h {
transform:rotate(270deg);
}
.part-n {
transform:rotate(180deg);
}
.part-e {
transform:rotate(360deg);
}
.part-s {
transform:rotate(180deg);
}
.part-g {
transform:rotate(180deg);
}
.part-r {
transform:rotate(0deg);
}
.part-b {
transform:rotate(-90deg);
}
.part-u {
transform:rotate(90deg);
}
.part-t {
transform:rotate(-90deg);
}
.part-q {
transform:rotate(90deg);
}
.part-a {
transform:rotate(180deg);
}
.part-k {
transform:rotate(0deg);
}
.part-i {
transform:rotate(90deg);
}


#4

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{
transform: translate(-300px, -200px) rotate(-90deg);
}
.part-h{
transform: translateX(-200px) rotate(-90deg);
}
.part-q{
transform: translate(100px,-200px) rotate(90deg);
}
.part-c{
transform: translate(200px,100px) rotate(90deg);
}
.part-o{
transform: translate(100px,200px) rotate(-90deg);
}
.part-k{
transform: translate(300px,-100px);
}
.part-i{
transform: translate(-200px,0px) rotate(90deg);
}
.part-e{
transform: translate(100px,-100px);
}
.part-w{
transform: translate(100px,200px) rotate(0deg);
}
.part-s{
transform: translate(100px,200px) rotate(180deg);
}
.part-n{
transform: translate(0px,200px) rotate(180deg);
}
.part-u{
transform: translate(0px,-200px) rotate(90deg);
}
.part-b{
transform: translate(-100px,-100px) rotate(-90deg);
}
.part-a{
transform: translate(100px,100px) rotate(180deg);
}
.part-r{
transform: translate(-100px,-100px);
}
.part-g{
transform: translate(-200px,0px) rotate(180deg);
}