12/32 98%

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

Блоки сложил, но конечный результат не правильно располагается в пространстве. Стало лень переделывать и передвинул камень целиком. Почему 98%? Окружность не перемещается, почему то… Кто разъяснит, почему не перемещается?

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

.content.overflow{
    transform: translateX(15px);
}

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

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

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

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

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

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

Окружность - это .crystal. Но двигая ее, вы всё равно не можете переместить кристалл. Они будут сдвигаться вместе, потому что части кристалла являются дочерними элементами по отношению к .crystal.

1 лайк
3

А я специально сначала просто собрала кристалл, а потом уже сдвинула. Так вышло проще и последовательнее.

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

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

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

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

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

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

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