Мне нужно применить наклон и повернуть элемент. Он работает нормально, но перекошенный текст не выровнен по левому краю в контейнере (см. Изображение результата):

Skewed text isn't left aligned

Текст слева переполняет контейнер: выравнивание H (от «Hello») и T (от «The») неправильное.

Вот чего я пытаюсь достичь:

Skewed text left aligned on a vertical line

.skew-parent-wrapper {
  width: 300px;
  margin-left: 100px;
  margin-top: 50px;
  border: 1px solid red;
  padding-bottom: 30px;
}

.skew-text {
  -moz-transform: rotate(-10deg) skew(-30deg, 0deg);
  -webkit-transform: rotate(-10deg) skew(-30deg, 0deg);
  -o-transform: rotate(-10deg) skew(-30deg, 0deg);
  -ms-transform: rotate(-10deg) skew(-30deg, 0deg);
  transform: rotate(-10deg) skew(-30deg, 0deg);
}
<div class="skew-parent-wrapper">
  <h1 class="skew-text">Hello Welcome to the skew text</h1>
</div>
6
Pioter 11 Июл 2017 в 14:19
По сути вы не можете . transform - это чисто визуальное изменение ... оно не влияет на расположение и размер элементов. Я подозреваю, что вам потребуется Javascript.
 – 
Paulie_D
11 Июл 2017 в 15:00
Знаете ли вы какие-либо плагины с таким эффектом?
 – 
Dileep
11 Июл 2017 в 15:02
Нет, и это было бы не по теме для SO.
 – 
Paulie_D
11 Июл 2017 в 15:03

3 ответа

Один из способов выравнивания перекошенного текста по вертикальной линии - вручную установить отрицательное значение отступ текста. Этот метод также требует установки transform-origin слева внизу:

.skew-parent-wrapper {
  width: 300px;
  margin-left: 100px;
  margin-top: 50px;
  border: 1px solid red;
  padding-top: 30px;
}

.skew-text {
  transform: rotate(-10deg) skew(-30deg, 0deg);
  transform-origin: 0 100%;
  text-indent: -15px;
}
<div class="skew-parent-wrapper">
  <h1 class="skew-text">Hello Welcome to the skew text</h1>
</div>

Этот метод работает с текстом, который занимает только две строки. Для текста, состоящего более чем из двух строк , вам нужно будет заключить каждую строку в тег (например, <span>):

.skew-parent-wrapper {
  width: 300px;
  margin-left: 100px;
  margin-top: 50px;
  border: 1px solid red;
  padding-top: 30px;
}

.skew-text span{
  display:block;
  transform: rotate(-10deg) skew(-30deg, 0deg);
  transform-origin: 0 100%;
}
<div class="skew-parent-wrapper">
  <h1 class="skew-text">
    <span>Hello Welcome to the</span>
    <span>skewed text with</span>
    <span>several lines many</span>
    <span>many many lines</span>
  </h1>
</div>

Обратите внимание, что вам необходимо установить для <span> значение display:block, потому что преобразования не применяются к встроенным элементам.

6
web-tiki 14 Июл 2017 в 17:55

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

Это единственная идея для меня исправить это.

0
R. Keller 11 Июл 2017 в 14:25

Трудно добиться выравнивания, если вы используете вращение как преобразование.

Используйте наклон, чтобы получить наклонные линии. Вы можете (до некоторой степени) получить угол наклона букв, используя курсив

Кроме того, нет необходимости во всех преобразованиях, специфичных для поставщика.

.skew-parent-wrapper {
  width: 300px;
  margin-left: 100px;
  margin-top: 50px;
  border: 1px solid red;
  padding-bottom: 30px;
}

.skew-text {
  transform: skewY(-20deg);
  font-style: italic;
  background-color: goldenrod;
}
<div class="skew-parent-wrapper">
  <h1 class="skew-text">Hello Welcome to the skewed text that can span several lines</h1>
</div>
0
vals 14 Июл 2017 в 17:20