CSS使用transform-origin定位旋转的元素 [英] CSS use transform-origin to position a rotated element

问题描述

我无法解决如何旋转元素，使其位于另一个元素下面。下面的图片应该说明预期的结果。

I can't work out how to rotate an element so that it sits underneath another one. The image below should illustrate the intended result.

这里是我到目前为止尝试过的：

Here is what I have tried so far:

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

第二个例子基本上做了我想要的，但文本是错误的方向。

The second example basically does what I want but the text is orientated the wrong way.

我可以得到的最接近的例子3，但我需要把它拉回左边。我尝试了 translate 但我无法使它工作，我尝试了一个负的权利 margin

The closest I can get is example 3 but I need to pull this back to the left. I've tried translate but I can't get it to work, I've tried a negative right margin of 100% which almost works but basically doesn't.

推荐答案

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

One method to achieve the expected output would be to do the following:

• 将按钮放在 div2 并将其放置在右边。


• 将 div2 >
  
• 以逆时针方向（-90deg）沿左下角的变换原点旋转 div2 。


• 旋转后， div2 将完全超出容器，因此我们需要添加一个额外的 translateY（100％）到转换堆栈。


• 文本向右对齐，并且有一个额外的 padding-right


• 该按钮也会旋转-90度，因为它是 div2 的子对象。



• Put the button within div2 and position it at the right edge.
• Absolutely position the div2 at the bottom of the parent container.
• Rotate the div2 in counter clockwise direction (-90deg) with the transform origin at left bottom.
• After rotation, the div2 would entirely go outside of the container and hence we need to add an extra translateY(100%) to the transform stack.
• The text is aligned to the right and an extra padding-right (greater than the width of the button) is added to keep the text away from the button.
• The button would also get rotated by -90 degree because it is a child of div2 and to counter that (that is to make the button text get displayed properly), we need to apply counter rotation.

现在，在这种方法中，唯一的缺点是，如果文本长度增加超出了可以适合单一行，那么它会环绕到下一行（看一下片段中的第二个示例）。

Now, in this approach the only drawback is that if the text length increases beyond what can be fit in a single line then it would wrap around to the next line (have a look at the second sample in snippet).

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

这篇关于CSS使用transform-origin定位旋转的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！