12/32 100% Для тех, у кого проблемы

html,
body {
width: 550px;
height: 310px;
margin: 0;
padding: 0;
}

.part-green {
transform: translateX(15px) rotate(90deg);
}

.part-maroon {
transform: translateY(-125px) rotate(180deg);
}

.part-orange {
transform: translateX(105px) translateY(160px) rotate(-90deg) scale(2);
}

.part-red {
transform: translateX(175px) translateY(-100px)skewX(-45deg);
}

.part-yellow {
transform: translateX(40px) rotate(90deg);
}

.part-blue {
transform: translateX(-120px) translateY(-80px) skewX(-45deg);
}

для тех кто дошел до данного уровня с этим заданием проблем не будет )

1 лайк

И тем не менее проблема появилась. Поглядите, пожалуйста ,что не так. Задание выполнено на 100% ,однако в различиях показывает не стыковку. Смотрю, смотрю на код, а понять ничего не могу. Спасибо

код

html,
body {
  width: 550px;
  height: 310px;
  margin: 0;
  padding: 0;
}

.part-green {
  transform: translateX(15px) rotate(90deg);
}

.part-maroon {
  transform: translateY(-125px) rotate(-180deg);
}

.part-orange {
  transform: translate(105px, 160px) scale(2) rotate(-90deg);
}

.part-red {
  transform: skewX(-45deg) translate(75px, -100px);
}

.part-yellow {
  transform: rotate(-270deg) translateY(-40px);
}

Порядок функций трансформации для оранжевого фрагмента имеет значение.
Посмотрите на код выше.

1 лайк

Спасибо большое. Это я сглупила, конечно, а ведь даже в подсказке был этот момент:cry:

У меня тут возник вопросик маленький, если писать таким вариантом: translate(140px, 70px);
То 2-ая координата будет влиять на первую? У меня почему то чистая магия с этим происходит, если по отдельности писать, то нормально, а если сокращенной версией, как здесь, то элементы ведут себя непредсказуемо(

Напишите правило целиком, пожалуйста. И для первого случая, и для второго.

Прошу прощения, зря побеспокоил, сейчас все работает нормально. Наверно это было связано со свойством rotate(90deg) из-за него элементы уходили не туда