12/32 Расколотый кристалл 100% но опять дроби + неудобство


#1

вопросы такие:

  1. опять не получается без дробей плюс на верхнем рисунке виден небольшой зазор а на нижнем всё типа нормально (как обычно ориентировался по нижнему).
  2. Главный вопрос: порекомендуйте в какой последовательности двигать синий и красный блоки- ибо они идут как то в диагонали и приходится при перемещении по Y потом подгонять координату по X.
    может есть какой то другой способ движения?

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

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

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

.part-orange {
transform: rotate(-90deg) scale(2.0) translate(-80px,52.5px);

}

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

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

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


12/32 Расколотый кристалл вопрос о 0.5px
#2

Порядок функций имеет значение. Попробуйте поменять местами - координаты будут другие.


#3

translate лучше всего всегда ставить в самом начале


#4

.part-orange {
transform: rotate(-90deg) scale(2.0) translate(-80px,52.5px);

}
у меня в коде было написано rotate(270deg) и сервер выдавал 99%,поставил -90deg - выдало 100%. Вопрос: в реальной жизни как лучше делать ? Градусы с минусом(-90deg) или без(270deg) ? Что в принципе одно и тоже…