Как сделать правильно вращение треугольника?

Question

[Lector]

Есть треугольник смотрящий вверх, при клике нужно его провернуть по часовой стрелке на 180 градусов, типа открылся список, при повторном клике провернуть опять по часовой стрелке на 180 градусов, но не обратно а именно по часовой. Это как бы аккордеон будет такой.

Answer 1

[hzzzzl]

чисто классами CSS придется исхитряться, проще наверно менять напрямую стили на угол+180 градусов



to do:
- получать текущий угол из css, а не из data-angle атрибута (хотя и так сойдет, браузеру пофиг)
- не прибавлять угол до бесконечности, а как-то его ограничить (хотя и так сойдет, браузеру пофиг)

Answer 2

[Ragtime Kitty]

Можно через два keyframes, если не смущает анимация при загрузке.

Answer 3

[alex4answ]

1. Класс с transform rotate + transition
2. Класс с анимацией
3. Анимация на jquery с флагом "открыт/закрыт"

Comments

[Lector]

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