Проблема масштабирования преобразования Webkit

#html #css #css-transforms

#HTML #css #css-преобразования

Вопрос:

Столкнувшись с проблемой масштабирования, как удалить лишнее пространство между двумя элементами span.

Я не могу добавить дополнительные теги в соответствии с требованиями. в теге span как исправить эту проблему.

 span {
  -webkit-transform-origin-x: 0%;
  -webkit-transform-origin-y: 0%;
}

Перед разделением диапазона

     <p style="margin: 0.0px 0.0px 0.0px 0.0px; ">
        <span style="font-size: 14pt; color: #000000; letter-spacing: 0pt; text-transform: none; text-align: left; text-decoration: none; word-spacing: 1.33pt; -webkit-transform: scale(0.7,1); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); text-shadow: none; display: inline-block; white-space: nowrap ;width:auto;height:auto;">Keebler Zesta Saltine Crackers</span>
    </p>

Скриншот перед разделением диапазона

После разделения диапазона

     <p style="margin: 0.0px 0.0px 0.0px 0.0px; ">
        <span style="font-size: 14pt; color: #000000; letter-spacing: 0pt; text-transform: none; text-align: left; text-decoration: none; word-spacing: 1.33pt; -webkit-transform: scale(0.7,1); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); text-shadow: none; display: inline-block; white-space: nowrap ;width:auto;height:auto;">Keebler Zesta Saltine</span><span style="font-size: 14pt; color: #000000; letter-spacing: 0pt; text-transform: none; text-align: left; text-decoration: none; word-spacing: 1.33pt; -webkit-transform: scale(0.7,1); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); text-shadow: none; display: inline-block; white-space: nowrap ;width:auto;height:auto;"> Crackers</span>
    </p>

Снимок экрана после разделения диапазона

Ответ №1:

Масштабируйте контейнер

 p {
     -webkit-transform: scale(0.7, 1);
     transform: scale(0.7, 1);
}

     <p style="margin: 0.0px 0.0px 0.0px 0.0px; ">
        <span style="font-size: 14pt; color: #000000; letter-spacing: 0pt; text-transform: none; text-align: left; text-decoration: none; word-spacing: 1.33pt; text-shadow: none; display: inline-block; white-space: nowrap ;width:auto;height:auto;">Keebler Zesta Saltine</span>
      <span style="font-size: 14pt; color: #000000; letter-spacing: 0pt; text-transform: none; text-align: left; text-decoration: none; word-spacing: 1.33pt;  text-shadow: none; display: inline-block; white-space: nowrap ;width:auto;height:auto;"> Crackers</span>
    </p>

Если вы планируете использовать только 2 диапазона, вы можете выровнять их, используя глобальный масштаб для контейнера, масштаб для второго диапазона и установив начало преобразования слева, чтобы расстояние между ними не менялось.

Обратите внимание, что общий масштаб второго диапазона представляет собой комбинацию обоих преобразований

 p {
  font-size: 40px;
  transform: scale(0.5, 1);
}
.test {
  transform: scale(2, 1);
  transform-origin: left center;
  display: inline-block;
}

 <p>
  <span>Keebler Zesta Saltine</span>
  <span class="test">Crackers</span>
</p>

1. Причина разделения на 2 диапазона заключается в применении различного масштабирования для каждого диапазона в пределах одного элемента абзаца. Если я применюсь к тегу абзаца, он будет применяться одинаково ко всем промежуткам. @vals Спасибо.

Ответ №2:

Использование преобразований CSS не влияет на ограничительную рамку элемента.

Вот почему во время компоновки первый диапазон по-прежнему имеет ту же ширину, что и без scale(0.7,1) .

Вы можете попробовать установить явное width , например. Или сделайте какую-нибудь негативную margin-right магию.