Я хочу нарисовать Колесо Фортуны, используя только CSS и jQuery. Я не хочу использовать какие-либо изображения.
Кроме того, я хочу иметь по крайней мере 8 сегментов в круге и правильно выравнивать каждое текстовое слово по вертикали в каждом сегменте. Вот фото для иллюстрации:
Как только у меня есть эта работа, я могу использовать свойство CSS3 rotate.
Любая идея, как я могу это сделать?
Здесь Spinning Wheel Demo сделано в HTML5 с использованием Canvas: LINK
Прямая загрузка в демонстрационные файлы проекта: ZIP
РЕДАКТИРОВАТЬ: Вот еще одна учебная демонстрация:
Создание колеса рулетки с использованием холста html5
Вот еще один пример вращающегося колеса с помощью Canvas
Проверьте эту ссылку → http://joelb.me/blog/2011/css-mask-tutorial-rotating-image-gallery/
Он содержит вводный учебник, который вам нужно. Проверьте также библиотечный код JS 2d Transformation в github.
Я создал рулетку с использованием Raphael по адресу: http://www.guesttime.com/members/ledlogic/roulette/index.html
Он поворачивается так же, как и вы, но вам придется обрабатывать центрирование для каждой буквы.