Анимация вращения. Эффект маятника.

Общее
1

Добрый день уважаемые. Возникла проблема с анимацией вращения объекта, очень надеюсь что вы мне дадите дельный совет)
Задача такая - Добавить колебаний перевернутой букве “М” по типу маятник.
Вот заготовка
https://jsfiddle.net/BlackStar1991/etbw01pe/
К сожалению, анимация с классом @keyframes spiderSwaying вращает объект относительно центра, хотя я и прописал смещение точки вращения transform-origin: center 10px;
Буду очень признателен, если укажите где я ошибаюсь

2

Вот так вроде не от центра: transform-origin: 0 10px;
Или иначе нужно?

3

Чёт не то, https://jsfiddle.net/BlackStar1991/etbw01pe/4/
эффект - колеблющийся маятника, не наблюдается

4

Тогда может быть так:

transform-origin: 50% 30px;

@keyframes spiderSwaying {
    0% {
        transform: scale(1, -1) rotate(-30deg) translateX(-30px);
    }
    50% {
        transform: scale(1, -1) rotate(0deg) translateX(0);
    }
    100% {
        transform: scale(1, -1) rotate(30deg) translateX(30px);
    }
}

Давно хочу спросить, все ваши вопросы - это части одного большого проекта или вы просто экспериментируете по мелочам?) Поделитесь, интересно (мне по крайней мере).

1 лайк
5

Спасибо, помогло :+1:
На вопрос ответ, да. Эксперементирую по мелочах. Чисто для себя :slight_smile: http://codepen.io/BlackStar1991/

6

Рыбка очень красивая)

7

Да, ладно, как по мне реальный монстр. Я пока до SVG и canvas всё не как не дойду, а на чистом CSS ограничено количество фигур, ну или их слишком муторно вырисовывать. Вы таким не увлекаетесь ?

8

SVG будет прямо ваше) Я canvas не знаю, а так векторные иконки по мелочи рисовала.