Что не так? Почему не 100%? Где ошибка?


#1
html,

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

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

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

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

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

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

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


#2

Имеет значение направление поворота. Поменяете угол на -90deg и будет 100%.


#3

Спасибо)))


#4

У меня тоже проблемка, 98% не подскажете?
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) scale(2) translate(-80px, 53px);
}

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

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

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


#5

Порядок функций трансформации имеет значение.


#6

ага, понял, спасибо)