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

Курсы §22. Двумерные трансформации
1 
    <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>

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

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

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

2

Для тех, кто не захочет убивать много времени на стандартные перемещения

.part-s {
transform: rotate(180deg) translateY(-200px) translateX(-100px)}

.part-a {
transform: rotate(180deg) translateX(-100px) translateY(-100px)}

.part-g {
transform: rotate(180deg) translateX(200px)}

.part-r {
transform: translateX(-100px) translateY(-100px)}

.part-b {
transform: rotate(-90deg) translateX(100px) translateY(-100px)}

.part-k {
transform: translateX(300px) translateY(-100px)}

.part-o {
transform: rotate(-90deg) translateY(100px) translateX(-200px)}

.part-w {
transform: translateY(200px) translateX(100px)
}

.part-c {
transform: rotate(90deg) translateY(-200px) translateX(100px)}

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

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

.part-e {
transform:translateY(-100px) translateX(100px)
}

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

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

.part-n {
transform: rotate(180deg) translateY(-200px) }

.part-t {
transform: rotate(-90deg) translateX(200px) translateY(-300px)}

1 лайк
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">
    </div>

THE QUICK BROWN GAS - щутка от разрабов

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

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

.part-n,
.part-g,
.part-a,
.part-s{
    transform: rotate(180deg);
}
1 лайк