Расколотый кристалл [12/32] 99%

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

Здравствуйте, моя проблема заключается в том, что оранжевый треугольник не совпадает с образцом. На первый взгляд не видно, но если посмотреть через вкладку “Наложение”, то можно увидеть странное несоответствие с двух сторон, обрывающееся на половине длины.

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(270deg) scale(2);
}

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

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

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

2

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

1 лайк
3

Спасибо! А почему так происходит? Ведь 270deg и -90deg вроде бы одно и то же.

4

Не знаю тоже. Видимо в трансформациях имеет значение направление поворота, против или по часовой стрелке.