CSS use transform-origin to position a rotated ele

Question

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.

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.

Answer 1

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

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

Answer 2

I have taken your second example and rotated the element the other way round. And then fixed the position with an extra 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>