12/32 Расколотый кристалл.

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

Что это за ерунда?

%D0%91%D0%B5%D0%B7%D1%8B%D0%BC%D1%8F%D0%BD%D0%BD%D1%8Bqw%D0%B9
Безымянныqwй.png992×1034 92 KB 

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

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

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

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

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

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

.part-blue {
  transform: skewX(-45deg) translateX(-200px) translateY(-80px);
}
1 лайк
2

Для .part-blue нужно поменять местами skew и translate.
Вот у меня было так. Если раскоментировать код, то 99% хотя блок стоит на месте, а если тот что есть оставить, то 100%))

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

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

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

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

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

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

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

/.part-blue {
transform: translate(-120px, -80px) skewX(-45deg) ;
/}*/

3

А у меня так вообще не кратные 5 значения)) и вообще изза 1рх 2-3 фигуры неверно отображались)

body {

width: 550px;
height: 310px;
margin: 0;
padding: 0;
}

.part-green {
transform: translate(14px, -1px) rotate(90deg);
}

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

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

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

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

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

4

Что-то я не вникаю, почему ничего не совпало? Синий блок вообще куда-то улетел якобы.

image
image1366×908 144 KB

6

Добрый день!
Прикрепите ваш CSS-код целиком, пожалуйста. Посмотрим, почему мог пропасть блок.

7

А как вы понимаете, когда skew перед translate, а когда наоборот?

8

Первое испытание, где я решил оставить 99.9 и не париться. Это издевательство какое-то

9

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

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

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

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

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

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

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

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

10

Бредовое задание, работает только если всё расположено в том порядке, в каком задумал разработчик. А его нужно просто угадать перебором. В итоге ты написал решение, но ещё нужно потратить время на то, чтобы переставлять свойства селектора местами, дабы угадать как же всё-таки они должны стоять.

Было то же самое, scale(2) должен стоять в середине, translate первым и rotate последним, только так заработало, в другом порядке не засчитывалось.

1 лайк
11

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

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

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

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

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

.part-blue {
transform:translate(-120px,-80px) skew(-45deg);
}
100%