Могу ли я рисовать что-то вроде Wheel of Fortune с помощью CSS?

Я хочу нарисовать Колесо Фортуны, используя только CSS и jQuery. Я не хочу использовать какие-либо изображения.

Кроме того, я хочу иметь по крайней мере 8 сегментов в круге и правильно выравнивать каждое текстовое слово по вертикали в каждом сегменте. Вот фото для иллюстрации:

Как только у меня есть эта работа, я могу использовать свойство CSS3 rotate.

Любая идея, как я могу это сделать?

Ответы

Ответ 1

Здесь Spinning Wheel Demo сделано в HTML5 с использованием Canvas: LINK

Прямая загрузка в демонстрационные файлы проекта: ZIP

РЕДАКТИРОВАТЬ: Вот еще одна учебная демонстрация:
Создание колеса рулетки с использованием холста html5

Ответ 2

Вот еще один пример вращающегося колеса с помощью Canvas

Ответ 3

Проверьте эту ссылку → http://joelb.me/blog/2011/css-mask-tutorial-rotating-image-gallery/

Он содержит вводный учебник, который вам нужно. Проверьте также библиотечный код JS 2d Transformation в github.

Ответ 4

Я создал рулетку с использованием Raphael по адресу: http://www.guesttime.com/members/ledlogic/roulette/index.html

Он поворачивается так же, как и вы, но вам придется обрабатывать центрирование для каждой буквы.