CSS преобразование не меняется CSS макет - PullRequest
Новая
       52

CSS преобразование не меняется CSS макет

0 голосов
/ 01 августа 2020

У меня есть гибкий макет, который показывает длинную синюю линию, а затем текст после нее. 

<div style="display: flex;">
  <div style="width: 200px; height: 30px; background-color: blue;"></div>
  <div>There's no space between me and the blue line</div>
</div>

Теперь я хочу повернуть синюю линию на 90 градусов: 

<div style="display: flex;">
  <div style="transform: rotate(-90deg); width: 200px; height: 30px; background-color: blue;"></div>
  <div>There's now space between me and the blue line.</div>
</div>

Однако теперь текст не сливается с концом синего div. Кажется, он сохраняет свою прежнюю ширину.

Как сделать так, чтобы повернутый синий div был sh рядом с текстом? (Я поигрался с transform-view безрезультатно.)

(Я понимаю, что в этом примере я мог бы просто изменить размеры синего div, но в моем фактическом случае я использую Изображение SVG, которое, очевидно, намного сложнее изменить)

1 Ответ

0 голосов
/ 01 августа 2020

Как указал Paulie_D, преобразования CSS не изменят макет.

Вместо этого я изменил элемент, поэтому мне не нужно было его вращать.

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

...