Как изменять положение элемента в зависимости от размера экрана transform-translate?

Question

[ddgrgrv]

Имеются вот такие элементы,реализованы через , как-нибудь можно изменять их положение в зависимости от ширины экрана

.price-background__component__1{
  transform: translate(280%, 130%) rotate(25deg);
  font-size: 48.8px;
}
.price-background__component__3{
  transform: translate(500%, 580%) rotate(25deg);
  font-size: 48.8px;
}
.price-background__component__2{
  transform: translate(2810%, 150%) rotate(-25deg);
  font-size: 40.8px;
}
.price-background__component__4{
  transform: translate(1650%, 670%) rotate(25deg);
  font-size: 33px;
}
.price-background__component__5{
  transform: translate(3530%, 580%) rotate(-26deg);
  font-size: 48px;
}

выглядит это вот так:

Answer 1

[Ankhena]

Смещайте их абсолютом, а не трансформом. Абсолют рассчитывает координаты от родителя, значит, заданные в % (или, возможно, еще с calc или обратным трансформом на половину ширины, если размер самих элементов не меняется) будут изменяться вместе с размерами родителя.

Если в какой-то момент нужно совсем все перестроить, то, как обычно @media

Еще совсем простой вариант: вместо кучи div использовать одну svg в фоне.

Comments

[ddgrgrv]

А можно как то реализовать анимацию,что бы при уменьшении экрана элемент проходил определенную траекторию от своего изначального места к конечной точке?

[Ankhena]

ddgrgrv, можно все фантазии сразу озвучивать?
Но да, можно, пишете js, который будет по формуле вашей траектории считать координаты.