Написать текст по дуге окружности

368

26 ноября 2016, 18:48

Есть макет, на котором слова вокруг написаны как-бы на окружности, от чего текст не просто прямой, а с внутренним углом. Вопрос, как такое сделать с помощью html и css ? Пока единственное что пришло в голову, это отпозиционировать отдельно каждую букву, но этот метод кажется совсем не практичным ...

Answer 1

В CSS пока нету встроенных возможностей для трансформации текста по кривой. Но есть плагин jQuery Lettering, который разбивает текст по буквам. После разбивки можно применять трансформацию css по-буквенно:

.char1 { transform: rotate(6deg); }
.char2 { transform: rotate(12deg); }
.char3 { transform: rotate(18deg); }

Центр вращения должен быть один для всех букв в слове, и должен быть смещён вниз, чтобы сделать текст "по дуге". Как сделать, с примером - подробно описано тут.