Css转换不会更改css布局

我有一个灵活的布局，它显示一条长的蓝色线条，然后在后面显示文本。

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">

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

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">

<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与文本齐平？(我已经尝试了transform-view，但没有结果。)

(我理解，在本例中，我只能更改蓝色div的尺寸，但在我的实际情况中，我使用的是SVG图像，这显然更难更改)

---

解决方案

正如Paulie_D指出的，css转换不会更改布局。

相反，我更改了元素，因此不需要旋转它。

在我的例子中，这涉及在Inkscape中旋转一个SVG，然后将每个元素复制到一个新文件中，因此不使用全局转换。