Как можно сверстать данный элемент сайта?

Question

[vetsmen]

Как можно сверстать подобный элемент круга, чтобы он еще и крутился, в одну сторону, юзая какую-либо функцию? Мыслей на этот счет 0, только если как-нибудь через transform. Либо на крайний случай придется прибегать к SVG.

Comments

[Сергей delphinpro]

На css конечно можно заморочиться. Но SVG будет проще и кроссбраузернее. Данные по карточкам заготовить в json формате, а потом уже скриптом генерить svg'шку, рисовать и анимировать.

[Kovalsky]

Сергей: я так и не смог сделать ссылку на вас в теле ответа, поэтому посмотрите пожалуйста на дополненную версию моего ответа.

[Сергей delphinpro]

Никита Полевой:
Чтобы была ссылка (и уведомление) поставьте двоеточие сразу после ника
@lazalu68:

Answer 1

[Kovalsky]

Пример

Также пример в котором угол задаётся автоматически.

По поводу комментария Сергея, Сергей: дык вроде ж уже разметку и стили сделали, какие еще заморочки могут быть? К тому же rotate вроде поддерживается нормально.

Comments

[vetsmen]

Тут для каждого блока нужно будет задавать свой угол, это первое
А второе, каким образом потом его крутить с анимацией?

[Kovalsky]

vetsmen: полагаю, с помощью CSS это единственный существующий не замороченный способ сделать подобное - просто расположить ваши блоки по всей длине окружности. Да, придётся задавать угол, но это достаточно просто, как с препроцессорами, так и с JS. Для SVG и canvas потребуется значительно больше расчётов.

"А второе, каким образом потом его крутить с анимацией?" - вот это неожиданный вопрос. Почему бы не так же, как повернуты карты - с помощью rotate?

[vetsmen]

Никита Полевой: спасибо, что навели в голове порядок
Может быть еще услышу варианты, пока что этот один из самых стоящих

[Сергей delphinpro]

Никита Полевой: Стоит обратить внимание на тот факт, что в задаче автора вопроса карточки не прямоугольные. Они трапецевидные. В css таких искажений не добиться без геморроя, да еще с поворотами, анимациями. Да еще хотелось бы наверное, чтобы промежутки между карточек были одинаковыми и ровными.
Так что я все-таки настою на том, что не стоит тратить время, лучше сразу отрисовать все в svg. Благо не нужно все делать руками, если хорошие библиотеки для работы с svg.

[Сергей delphinpro]

Более того - там даже не трапеция, а сектор круга ))

Answer 2

[dom1n1k]

HTML/CSS-верстка тут практически непригодна.
Нужно использовать какую-то графическую библиотеку, работающую с графикой как с логическими примитивами (то есть не только рисует, но потом умеет двигать, обрабатывать действия пользователя и пр.). Это может быть и SVG, и canvas - кому что привычнее и удобнее. В качестве примеров можно привести Snap.svg и Paper.js соответственно, но не обязательно их, есть и другие альтернативы.