CSS 使用 transform-origin 定位旋转的元素

Question

我不知道如何旋转一个元素，使其位于另一个元素的下方。下图应说明预期结果。

这是我目前尝试过的方法：

.div1 {
  height: 120px;
  width: 120px;
  float: left;
  margin: 20px;
  border: solid 1px #000;
  overflow: hidden;
}
.div1 button {
  width: 48px;
  height: 48px;
  border: 0;
  margin: 0;
  padding: 0;
}
.div2 {
  background-color: #999;
  height: 48px;
  line-height: 48px;
  box-sizing: border-box;
}
.originFromLeft .div2 {
  transform: rotate(90deg);
  transform-origin: 24px 24px;
  padding-left: 12px;
  text-align: left;
}
.div1.originFromRight {
  overflow: visible;
}
.originFromRight .div2 {
  padding-right: 12px;
  text-align: right;
  transform: rotate(-90deg);
  transform-origin: right top;
}

<div class="div1">
  <button>></button>
  <div class="div2">HELLO</div>
</div>

<div class="div1 originFromLeft">
  <button>></button>
  <div class="div2">HELLO</div>
</div>

<div class="div1 originFromRight">
  <button>></button>
  <div class="div2">HELLO</div>
</div>

第二个示例基本符合我的要求，但文本方向错误。

我能得到的最接近的是示例 3，但我需要将其拉回左侧。我已经尝试 translate 但我无法让它工作，我已经尝试了 100% 的负面权利 margin 这几乎可以但基本上没有。

Answer 1

实现预期输出的一种方法是执行以下操作：

将button放在div2内，并放在右边缘。
绝对将 div2 定位在父容器的底部。
逆时针旋转 div2 (-90 度)，变换原点在左下角。
旋转后，div2 将完全离开容器，因此我们需要向变换堆栈添加额外的 translateY(100%)。
文本右对齐并添加额外的 padding-right（大于按钮的宽度）以使文本远离按钮。
按钮也会旋转 -90 度，因为它是 div2 的子按钮，为了解决这个问题（即让按钮文本正确显示），我们需要应用反向旋转。

现在，在这种方法中，唯一的缺点是如果文本长度增加到超出单行的长度，那么它会换行到下一行（查看代码片段中的第二个示例）。

.div1 {
  position: relative;
  height: 120px;
  width: 120px;
  float: left;
  margin: 20px;
  border: solid 1px #000;
  overflow: hidden;
}
button {
  position: absolute;
  display: inline-block;
  bottom: 0;
  right: 0;
  width: 48px;
  height: 48px;
  border: 0;
  margin: 0;
  padding: 0;
  transform: rotate(90deg);
}
.div2 {
  position: absolute;
  box-sizing: border-box;
  bottom: 0px;
  height: 48px;
  width: 100%;
  padding-right: 60px;
  line-height: 48px;
  background-color: #999;
  text-align: right;
  transform: rotate(-90deg) translateY(100%);
  transform-origin: left bottom;
}

<div class="div1">
  <div class="div2">HELLO
    <button>></button>
  </div>
</div>

<div class="div1">
  <div class="div2">HELLO WORLD!!!!!
    <button>></button>
  </div>
</div>

Answer 2

我已经以你的第二个例子为例，并以相反的方式旋转了元素。然后用额外的 translateX

固定位置

.div1 {
  height: 120px;
  width: 120px;
  float: left;
  margin: 20px;
  border: solid 1px #000;
  overflow: hidden;
}
.div1 button {
  width: 48px;
  height: 48px;
  border: 0;
  margin: 0;
  padding: 0;
}
.div2 {
  background-color: #999;
  height: 48px;
  line-height: 48px;
  box-sizing: border-box;
}
.originFromLeft .div2 {
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: top left;
  padding-left: 12px;
  text-align: right;
}

<div class="div1 originFromLeft">
  <button>></button>
  <div class="div2">HELLO</div>
</div>

CSS 使用 transform-origin 定位旋转的元素

CSS use transform-origin to position a rotated element

css

css-transforms