Текст CircleType удаляет пробелы после rotateY

У меня есть этот код:

<div id = "curvy">
    This is the curved text
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/circletype.min.js"></script>
<script>
const circleType = new CircleType(document.getElementById('curvy'));
circleType.dir(-1).radius(1100);

$( document ).ready(function() {
    var counter = 1;
    var deg = -40;

$($($('#curvy div').find('span')).get().reverse()).each(function (index, value ) {
/* var css = $(this).css('transform');
css = css + ' rotateY(-50deg)'; */
if (counter > 5) {
    var text = $(this).html();
    $(this).html('');
    $(this).css('display','flex');
    $(this).css('vertical-align','top');
    console.info(text);

    //$(this).html('');
   var newElem = $('<span></span>').append(text);
   newElem.appendTo($(this));

/*    newElem.css('position','relative');
   newElem.css('z-index',counter); */
   newElem.css('vertical-align','top');
   newElem.css('transform','rotateY('+ deg +'deg)');
   deg = deg - 2.5;
}

//console.info(value);
counter = counter + 1;

});

});

</script>
<style>
html, body {
    font-size: 30px;
}
</style>

Это работает нормально, но после того, как я начинаю вращать каждую букву с помощью rotateY в ее собственном диапазоне, родительский диапазон, кажется, добавляет пробел между ними, от которого я хочу избавиться.

Проверить jsfiddle

w3.org/TR/css-transforms-1 - «В пространстве имен HTML свойство преобразования не влияет на поток содержимого, окружающего преобразованный элемент». Вот почему теперь давайте посмотрим, как это исправить. :)

— 27.03.2018 09:41

Я не уверен, что это вызывает, поскольку сгенерированный код без трехмерного вращения работает без пробелов.

— 27.03.2018 09:49

javascript jquery html css

27.03.2018 09:04

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

403

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Что ж, я подходил к этому совершенно неправильно.

Проблема заключалась не в промежутках, заполнении или каких-либо полях, а в значении translateX или rotate.

Поскольку CircleType использовал начальный размер буквы при рендеринге эффекта, манипуляции, которые я делал позже через jQuery, не учитывались им.

Мне пришлось сохранить матрицу, а затем решить, буду ли я увеличивать значение поворота или значение translateX. Я выбрал последнее, потому что с ним было легче играть. Поскольку мне нужно, чтобы вращение начиналось после определенного количества символов, я использую соответствующие проверки.

<div id = "curvy">
   Curved text
</div>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/circletype.min.js"></script>
<script>
const circleType = new CircleType(document.getElementById('curvy'));
circleType.dir(-1).radius(900);

$( document ).ready(function() {
    var counter = 1;
    var deg = -40;
    var padding = 0;
$($($('#curvy div').find('span')).get().reverse()).each(function (index, value ) {
var css = $(this).css('transform').replace(/[^0-9\-.,]/g, '').split(',');
var x = css[12] || css[4];
var y = css[13] || css[5];

    var a = css[0];
    var b = css[1];
    var angle = Math.atan2(b, a) * (180/Math.PI);

if (counter > 5) {
    if (counter >= 12) {
        padding = padding + 6 ;
    } else
        padding = padding + 4 ;
    var text = $(this).html();
    $(this).html('');
    $(this).css('display','flex');
   x = parseFloat(x) + padding;
   $(this).css('transform', 'translateX('+x+'px) rotate('+angle+'deg)');
   var newElem = $('<span></span>').append(text);
   newElem.appendTo($(this));

   newElem.css('transform','rotateY('+ deg +'deg)');
   deg = deg - 2.5; 
}

counter = counter + 1;

});

});

</script>
<style>
html, body {
    font-size: 30px;
    top: 50%;
    left: 50%;
    position: absolute; 
}
</style>

Обновлен jsFiddle

28.03.2018 01:36