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

vetalil18 · 23.Август.2016 19:51:38

`

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

        <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)
}``

Ahmed · 15.Ноябрь.2016 19:46:52

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

Sambrello1 · 16.Декабрь.2017 08:58:39

    <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);
}

Romzesovicc · 13.Август.2019 05:07:13

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);
}

Maksim75 · 16.Март.2020 05:42:42

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-e {
transform: rotate(0deg);
}

.map img:nth-last-child(-n+4) {
transform: rotate(180deg);
}

.map img:nth-child(-n+2),
.map img:nth-child(9),
.map img:nth-child(11) {
transform: rotate(-90deg);
}

.map img:nth-child(4),
.map img:nth-child(5),
.map img:nth-child(6),
.map img:nth-child(7) {
transform: rotate(90deg);
}

Marshal_Rybalka · 28.Март.2020 00:42:40

Я что-то намудрил)))

body {
width: 550px;
height: 400px;
margin: 0;
padding: 0;
}

.map {
width: 400px;
height: 200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}

.map img {

margin: auto;
padding: 0;
}

.map img:nth-child(1) {
order: 7;
transform: rotate(90deg);
}

.map img:nth-child(2) {
order: 11;
transform: rotate(-90deg);
}

.map img:nth-child(3) {
order: 12;
}

.map img:nth-child(4) {
order: 2;
transform: rotate(-90deg);
}

.map img:nth-child(5) {
order: 13;
transform: rotate(180deg);
}

.map img:nth-child(6) {
order: 3;
transform: rotate(0deg);
}

.map img:nth-child(7) {
order: 16;
transform: rotate(180deg);
}

.map img:nth-child(8) {
order: 6;
transform: rotate(90deg);
}

.map img:nth-child(9) {
order: 8;
}

.map img:nth-child(10) {
order: 15;
transform: rotate(180deg);
}

.map img:nth-child(11) {
order: 4;
transform: rotate(90deg);
}

.map img:nth-child(12) {
order: -1;
transform: rotate(-90deg);
}

.map img:nth-child(13) {
order: 5;
transform: rotate(90deg);
}

.map img:nth-child(14) {
order: 9;
transform: rotate(-90deg);
}

.map img:nth-child(15) {
order: 10;
}

.map img:nth-child(16) {
order: 14;
transform: rotate(180deg);
}

Svetlana921 · 26.Август.2020 18:40:50

Просто переименовала картинки) потом развернула.

.part-e,
.part-s,
.part-h,
.part-n {
transform: rotate(90deg);
}

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

.part-u,
.part-b,
.part-r,
.part-g {
transform: rotate(180deg);
}

Svetlana921 · 26.Август.2020 18:44:37

Ой, как то некрасиво код ушёл. Извините, первый раз пишу)

OlgaK · 25.Октябрь.2020 16:18:30

Это было самое запарное задание всех времен
Мне кажется я полчаса сидела передвигала прямоугольнички
Наверное, проще было бы выписать нужный порядок и просто буквы подправить в html после того, как повернула куски карты

body {
width: 550px;
height: 400px;
margin: 0;
padding: 0;
}

.map {
display: flex;
flex-wrap: wrap;
width: 400px;
height: 200px;
margin: 0 auto;
}

.map img {
/float: left;/
margin: 0;
padding: 0;
}
/w e k r/

.part-c {
transform: rotate(90deg);
order: -10;
}
.part-o {
transform: rotate(-90deg);
order: -6;
}
/w/
.part-w {
order: -5;
}
.part-h {
transform: rotate(-90deg);
order: -15;
}
.part-n {
transform: rotate(180deg);
order: -4;

}
/e/
.part-e {
order: -14;
}
.part-s {
transform: rotate(180deg);
}
.part-i {
transform: rotate(90deg);
order: -11;
}
/k/
.part-k {
order: -9;
}
.part-a {
transform: rotate(180deg);
order: -2;
}
.part-q {
transform: rotate(90deg);
order: -13;
}
/1 t/
.part-t {
transform: rotate(-90deg);
order: -16;
}
.part-u {
transform: rotate(90deg);
order: -12;
}
.part-b {
transform: rotate(-90deg);
order: -8;
}
/r/
.part-r {
order: -7;
}
.part-g {
transform: rotate(180deg);
order: -3;
}[quote=“vetalil18, post:1, topic:4143, full:true”]
`

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

        <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)
}``
[/quote]

quaker · 12.Март.2021 16:07:08

Это было очень долго.
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:rotate(-90deg);}
.part-h {transform:rotate(-90deg);}
.part-e {transform:rotate();}
.part-q {transform:rotate(90deg);}
.part-u {transform:rotate(90deg);}
.part-i {transform:rotate(90deg);}
.part-c {transform:rotate(90deg);}
.part-k {transform:rotate();}
.part-b {transform:rotate(-90deg);}
.part-r {transform:rotate();}
.part-o {transform:rotate(-90deg);}
.part-w {transform:rotate();}
.part-n {transform:rotate(180deg);}
.part-g {transform:rotate(-180deg);}
.part-a {transform:rotate(180deg);}
.part-s {transform:rotate(180deg);}

cynvox · 13.Март.2021 16:39:10

Задание легкое, но очень нудное. Стоит сократить карту 3х3 (2х3)
Для тех кто отлично знает как его выполнить, но лень вот код…
HTML:

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

CSS:

.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-a, .part-s {transform:rotate(180deg);}
.part-g {transform:rotate(-180deg);}

Shuesu · 15.Март.2021 05:19:05

100%
HTML:

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

CSS:

.map img:nth-last-child(-n+4) {
  transform: rotate(180deg);  
  }
  
.part-t,
.part-h,
.part-o,
.part-b {
  transform: rotate(-90deg); 
  }
  
.map img:nth-child(n+4):nth-child(-n+7) {
  transform: rotate(90deg);  
  }

antropian · 05.Апрель.2021 13:48:10

В чем прикол использовать селекторы на основе позиции? В них имеется смысл, когда между элементами есть какая-то связь. Типа, каждый третий блок в раскладке - nth-of-type(3n).

А здесь зачем, когда гораздо проще и понятнее будет выбор конкретных классов?
.map img:nth-child(n+4):nth-child(-n+7) - совершенно нечитаемый код. Если это была попытка его упростить, то она явно неудачная

smus · 10.Июль.2021 09:03:35

Ключевая фраза - the quick brown gas

tema96 · 10.Ноябрь.2021 07:28:27

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

CSS
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-o{
transform:rotate(-90deg);
}

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

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

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

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

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

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

.part-k{
transform:rotate(360deg);
}

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

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

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

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

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

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

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

100%

sakitow · 10.Ноябрь.2021 15:12:18

CSS код можно упростить например

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

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

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

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

NiAlKo · 01.Декабрь.2021 17:44:16

Сначала думал по алфавиту, но увы
Сделал так:

Code

/*ABCEGHIKNOQRSTUW*/
.part-s/*last*/,
.part-a/*15*/,
.part-g/*14*/, 
.part-n/*13*/{
  transform: rotate(180deg);
  }
 .part-t/*1*/,
 .part-h/*2*/,
 .part-b/*9*/,
 .part-o/*11*/{
  transform: rotate(-90deg);
  } 
.part-q/*4*/,
.part-u/*5*/,
.part-i/*6*/,
.part-c/*7*/{
  transform: rotate(90deg);
  }
  /* only for information */
 .part-e/*3*/,
 .part-k/*8*/,
 .part-r/*10*/,
 .part-w/*12*/{
  transform: rotate(0deg);
  }

power_girl · 28.Февраль.2022 05:27:02

100%, не понимаю почему некоторые пошли прям очень длинным путем, лично для меня это было легко)

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

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

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

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

Hiroshi662 · 23.Март.2022 14:05:00

Написала сетку на гридах. Муторно и много, зато интересно :0

Спойлер

.map {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
}

.part-a {
  grid-column: 3/4;
  grid-row: 4/5;
  transform: rotate(180deg);
}

.part-b {
  grid-column: 1/2;
  grid-row: 3/4;
  transform: rotate(-90deg);
}

.part-c {
  grid-column: 3/4;
  grid-row: 2/3;
  transform: rotate(90deg);
}

.part-e {
  grid-column: 3/4;
  grid-row: 1/2;
  transform: rotate(0deg);
}

.part-g {
  grid-column: 2/3;
  grid-row: 4/5;
  transform: rotate(180deg);
}

.part-h {
  grid-column: 2/3;
  grid-row: 1/2;
  transform: rotate(-90deg);
}

.part-i {
  grid-column: 2/3;
  grid-row: 2/3;
  transform: rotate(90deg);
}

.part-k {
  grid-column: 4/5;
  grid-row: 2/3;
  transform: rotate(0deg);
}

.part-n {
  grid-column: 1/2;
  grid-row: 4/5;
  transform: rotate(180deg);
}

.part-o {
  grid-column: 3/4;
  grid-row: 3/4;
  transform: rotate(-90deg);
}

.part-q {
  grid-column: 4/5;
  grid-row: 1/2;
  transform: rotate(90deg);
}

.part-r {
  grid-column: 2/3;
  grid-row: 3/4;
  transform: rotate(0deg);
}

.part-s {
  grid-column: 4/5;
  grid-row: 4/5;
  transform: rotate(180deg);
}

.part-t {
  grid-column: 1/2;
  grid-row: 1/2;
  transform: rotate(-90deg);
}

.part-u {
  grid-column: 1/2;
  grid-row: 2/3;
  transform: rotate(90deg);
}

.part-w {
  grid-column: 4/5;
  grid-row: 3/4;
  transform: rotate(0deg);
}

tiger45 · 21.Май.2022 14:25:58

Народ, подскажите пожалуйста. Где на карте нарисованы обозначения её кусочков т.е буквы эти part- t,h,e и д.р ? Таращусь на карту и не вижу, хотя с очень плохим зрением как у меня это и не удивительно