@ferds
front-end

Плавный поворот объекта вокруг неподвижной точки?

Всем привет,
есть переключатель, который указывает на активную область.
подскажите как плавно переместить стрелку с текущего положения
b08f9d1d17f441c0a2f71edaef42fc27.png

в крайнее правое.
b3a13dab36db4ae790a78285d6375c19.png

Средствами CSS.
Может кто сталкивался.
Получается нужно что бы верхняя часть была не подвижной, у меня пока не получилось так, и при переходе она дергается вверх, а потом становится как нужно в правый край :(

e257fcbe87224e52830bd22242d42d69.png

перемещаю таким кодом:
.scale-arrow {
position: absolute;
top: 22px;
left: 10%;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: rotate(-29deg);
transform: rotate(-29deg);
}

.scale-arrow.active {
top: 22px;
left: 38%;
-webkit-transform: rotate(-147deg);
transform: rotate(-147deg);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

Подскажите что использовать, что искать, что бы переместить объект вокруг неподвижной точки.
Всем спасибо!
Хорошего дня!
  • Вопрос задан
  • 457 просмотров
Решения вопроса 1
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы