Search code examples
csscss-transforms

CSS transform doesn't change CSS layout

I have a flex layout that shows a long blue line then text after it.

<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>

Now I want to rotate the blue line by 90 degrees:

<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>

However, now the text is not flushed with the end of the blue div. It seems it keeps its old width.

How can I make the rotated blue div is flush next to the text? (I've played around with transform-view to no avail.)

(I understand, in this example, I could just change the dimensions of the blue div, but in my actual case I'm using an SVG image, which is obviously a lot harder to change)

Solution

  • As Paulie_D pointed out, CSS transforms won't change the layout.

    Instead, I altered the element so I didn't need to rotate it.

    In my case, this involved rotating an SVG in inkscape, then copying each element to a new file, so no global transformations were used.