Align to left side of contaner a element rotated -

Question

div {
  width: 300px;
  height: 300px;
  border:1px solid black;
}
h1 {
  width: 300px;
  transform: rotate(-90deg)
}

<div>
  <h1>Hola</h1>
</div>

If you try this snippet, you will see that the h1 is rotated and placed in the center of the div (makes sense, they have same width)

But how to align it to the left? (flexible container's width)

Answer 1

check this out it will give a direction to your required solution..

 div {
   width: 300px;
   height: 300px;
   border: 1px solid black;
 }
 h1 {
   width: 70px;
   margin-left: -20px;
   float: left;
   transform: rotate(-90deg)
 }

<div>
  <h1>Hola</h1>
</div>

Updated

Or you can do in this way also

 div {
   width: 300px;
   height: 300px;
   border: 1px solid black;
 }
 h1 {
   position: absolute;
   left: -10px;
   top: 2px;
   transform: rotate(-90deg)
 }

<div>
  <h1>Hola</h1>
</div>

Answer 2

You can position the h1 element absolutely with respect to the parent div and then use transform-origin property to specify the axis about which the rotation should happen.

In the below snippet, the element is positioned at the bottom of the parent and because the origin is set at left-bottom, the left-bottom of the element (h1) stays at its position during rotation.

Now because of the rotation, the element would go outside of the parent after rotation. To bring it back into position add translateY(100%) to the transform stack. A text-align: right is added to set the content at left-top. The text-align makes it look a bit more hackish than it actually is but otherwise it is difficult to position at left-top.

div {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}
h1 {
  position: absolute;
  display: inline-block;
  bottom: 0px;
  width: 300px;
  text-align: right;
  transform: rotate(-90deg) translateY(100%);
  border: 1px solid;
  transform-origin: left bottom;
}
div, h1 {
  margin: 0px;
  padding: 0px;
}

<div>
  <h1>Hola</h1>
</div>

---

Note to future visitors: Unlike using static values for positioning, this solution using translateY() would be able to adapt itself automatically even if the length of the content increases or spans multiple lines like in the below snippet. Again, the only drawback would be that the text would be right aligned.

div {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 250px;
  border: 1px solid black;
}
h1 {
  position: absolute;
  display: inline-block;
  bottom: 0px;
  width: 250px;
  text-align: right;
  transform: rotate(-90deg) translateY(100%);
  border: 1px solid;
  transform-origin: left bottom;
}
div,
h1 {
  margin: 0px;
  padding: 0px;
}

<div>
  <h1>Halooo</h1>
</div>
<div>
  <h1>Some lengthy content which wraps around</h1>
</div>