CODEWITHSUNDEEP
htmlcsscss-transforms
Qwerty
Qwerty

Reputation: 31949

CSS transform: rotate top-left corner of child over bottom-left corner of parent

Is there a way how to automatically achieve this without the knowledge of line height/parent height with negative translate?

Ideal solutions:

desired: enter image description here actual result: enter image description here

jsfiddle here

.parent {
  margin-top: 100px;
  border: 1px solid green;
  border-left-color: red;
  position: absolute;
}

.child {
  border: 1px solid orange;
  border-left-color: red;
  transform: rotate(-90deg)/*translate(-20px)*/;
  transform-origin: top left;
}
<div class="parent">
  <div class="child">
    CONCEPT
  </div>
</div>

Upvotes: 1

Views: 1942

Answers (2)

Temani Afif
Temani Afif

Reputation: 272901

You can try this:

.parent {
  border: 1px solid green;
  border-left-color: red;
  margin-top:100px;
  position:absolute;
}

.child {
  border: 1px solid orange;
  border-left-color: red;
  transform: rotate(-90deg) translateY(100%);
  transform-origin: bottom left;
}
<div class="parent">
  <div class="child">
    CONCEPT
  </div>
</div>

Upvotes: 3

Qwerty
Qwerty

Reputation: 31949

OK, seems like the magic for me was in absolute position of the child. This way the parent shrinks to zero height where top-left corner becomes equal to bottom-left corner.

enter image description here

.child {
  position: absolute;
}

This solution won't work however for parents that won't shrink due to other content.

Upvotes: 0

Related Questions