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（-90deg），变换原点位于左下角。
• 轮换后，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

修复位置

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;