如何使用 CSS 将旋转元素动态适配到父元素？

Question

我有 2 个 div：.container 及其子 .element。
容器以页面为中心，两个元素的宽度和高度都有 position: absolute 以及 vw 和 vh。

它们的区别在于父元素的高度是25vh，宽度是25vw，而子元素是相反的：宽度是25vh，宽度是25vw 表示身高。这意味着一个的宽度等于另一个的高度。

然后，我用transform: rotate(90deg)旋转子div。现在他们看起来一样了。

我只想移动子元素，以便它动态地适合父元素。但我没有完成它。我尝试使用百分比或 vw 和 vh 单位的定位属性、transform-origin、translate 等，但没有任何效果。

如何将此 div 放入父 div 中，同时在任何屏幕尺寸上保持这种方式？

body {
  background-color: #333;
}
.container {
  background-color: #000;
  position: absolute;
  height: 25vh;
  width: 25vw;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.element {
  position: absolute;
  background-color: #abc;
  transform: rotate(90deg);
  height: 25vw;
  width: 25vh;
}

<div class="container">
  <div class="element"></div>
</div>

Answer 1

你需要考虑 transform-origin 还有一些 translation

body {
  background-color: #333;
}

.container {
  background-color: #000;
  position: absolute;
  height: 25vh;
  width: 25vw;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.element {
  position: absolute;
  background-color: #abc;
  height: 25vw;
  width: 25vh;
  transform: translateY(-100%) rotate(90deg);
  transform-origin: bottom left;
}

<div class="container">
  <div class="element"></div>
</div>

如何使用 CSS 将旋转元素动态适配到父元素？

How to dynamically fit a rotated element to the parent element with CSS?

css

css-transforms