当子元素旋转时改变父元素的大小

Question

我有一个包裹块(wrapper)，里面有一个div。 我对子元素应用CSS旋转，希望父元素的宽度和高度也能相应变化 - 子元素一直在父元素中间（就像图片中的效果）。

#wrap {
  margin-top: 100px;
  width: auto;
  height: auto;
  position: relative;
  border: 1px solid red;
  box-sizing: border-box;
}
#div {
  position: relative;
  top: 0;
  left: 0;
  background-color: green;
  width: 200px;
  height: 80px;
  display: block;
  transform: rotate(120deg);
}

<div id="wrap">
  <div id="div">123</div>
</div>

示例：https://jsfiddle.net/y2mw3wxn/

必须如此示例：

- frontEndNoob

---

真的吗？还没有人回答这个问题吗？ - Asim K T

Answer 1

从这个答案中大量借鉴:

基本上，当你使用transform（rotate或scale或任何其他transform值）时，你并没有触及正常的文档流，你只是改变了该元素的视觉外观。

所以，回答你的问题：

当子元素旋转时，我们能否调整父元素？不，你不能只通过CSS来做到这一点。（如果有人知道，请纠正我。）

您可能需要使用JavaScript来实现相同的功能。进行一些计算并将width和height样式应用于父元素。

参考资料： 来自MDN：

CSS transform属性允许您修改CSS可视格式模型的坐标空间。使用它，可以根据设置的值对元素进行平移、旋转、缩放和倾斜。

和

通过修改坐标空间，CSS transforms可以在不破坏正常文档流的情况下改变受影响内容的位置和形状。本指南介绍了使用transforms的入门知识。

- Asim K T