CSS 转换不改变 CSS 布局

Question

我有一个 flex 布局，它显示一条蓝色长线，然后是文本。

<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 与文本齐平？（我玩过 transform-view 但无济于事。）

（我明白，在这个例子中，我可以只改变蓝色的尺寸 div，但在我的实际情况下，我使用的是 SVG 图像，这显然很难改变）

Answer 1

正如 Paulie_D 指出的那样，CSS 转换不会改变布局。

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

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

CSS 转换不改变 CSS 布局

CSS transform doesn't change CSS layout

css

css-transforms