Я пытаюсь создать пончик с текстом внутри. В настоящее время я пытаюсь разместить каждый элемент внутри контейнера по кругу с помощью преобразования, но полученное значение недействительно и значение JQuery CSS не отображается.
Вот скрипка - https://jsfiddle.net/dm6owLp9/
Ожидаемый результат - применить transform с rotate, translate и другим значением rotate к каждому тегу p, позиционируя каждый элемент вокруг бублика. .
Текущий результат - нет. * Значение 1015 * применяется к любому из тегов p.
В строке 37 из JQuery изменяя его на:
'transform': 'rotate(' + rot * 1 + 'deg)'
Применяет стиль преобразования к каждому элементу, поэтому я предполагаю, что основная проблема заключается в строке 37, но я не уверен, где я ошибся с этой строкой. Поскольку выполнение console.log этого показывает то, что мне кажется приемлемым CSS значением, которое является:
transform: rotate(96.66666666666667deg) translate(-335.83333333333337) rotate(-96.66666666666667deg);
Если я затем добавлю это значение CSS к одному из тегов p, инспектор браузера сообщает об этом как о недопустимом свойстве CSS.
В качестве примечания я добился этого эффекта с помощью примеси S CSS, но количество элементов в пончике может варьироваться, а размер пончик должен расширяться и сжиматься.