расколотый кристалл [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: rotate(180deg) translateY(125px);
}

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

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

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

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

Попробуйте другую последовательность: крутить, перемещать, увеличивать.

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

.part-maroon {
    transform: translate(0,-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,0) rotate(90deg);
}

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

Веселят эти задания меня :slight_smile:

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