CSS 变换不会改变 CSS 布局答案

【问题标题】：CSS transform doesn't change CSS layoutCSS 变换不会改变 CSS 布局
【发布时间】：2020-08-01 21:01:15
【问题描述】：

我有一个 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 图像，这显然更难改变）

【问题讨论】：

transform 是完全视觉的，它实际上并没有改变元素的大小。我建议你重新考虑你的方法。
@Paulie_D 我担心你是对的。但是，这意味着我需要生成一个全新的 SVG 图像（不旋转它）。
确实，这取决于您的实际 SVG 和用例。
分享您的真实用例，我们可能会找到无需转换的解决方案
谢谢@TemaniAfif，但我现在已经复制了 SVG 文件，所以它不需要旋转。我在 Inkscape 中旋转了整个图像，然后将每个元素复制并粘贴到一个新文件中，因此它不包含旋转，然后就是这样。

标签： css css-transforms

【解决方案1】：

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

相反，我改变了元素，所以我不需要旋转它。

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

【讨论】：