How to rotate text and pin to the right bottom corner?

Question

I am fiddling the rotate property and realized that the elements would shift to different position based on its text length.

Here is the code for the rotate part:

transform: rotate(-90deg) translate(0, -100%);
transform-origin: 0 0;
position: absolute;
bottom: 6rem;
right: -4rem;

.stripBox {
  min-height: 100px;
  background-size: cover;
  background-position: center center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}

.stripBox__smallNum {
  padding-left: 2rem;
}

.stripBox__heading {
  padding-right: 1rem;
  color: white;
  font-size: 1.2rem;
}

.stripBox--right {
  flex-direction: row-reverse;
}

.stripBox--right .stripBox__smallNum {
  padding-right: 1rem;
}

.stripBox--right .stripBox__heading {
  padding-left: 2rem;
}

.stripBox:nth-child(1) {
  background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}

.stripBox:nth-child(2) {
  background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}

.stripBox:nth-child(3) {
  background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}

.stripBox:nth-child(4) {
  background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}

.stripBox:nth-child(5) {
  background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}

.stripBox:nth-child(6) {
  background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}

.stripBox:nth-child(7) {
  background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}

.stripBox:nth-child(8) {
  background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}

.stripBox::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(29, 41, 87, 0.4);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
}

@media (min-width: 992px) {
  .stripBox {
    min-height: 400px;
    align-items: flex-end;
  }
  .stripBox__heading {
    transform: rotate(-90deg) translate(0, -100%);
    transform-origin: 0 0;
    position: absolute;
    bottom: 6rem;
    right: -4rem;
  }
  .stripBox--right {
    flex-direction: row;
  }
  .stripBox--right .stripBox__heading {
    padding-left: 0;
  }
  .stripBox:nth-child(1) {
    background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
  }
  .stripBox:nth-child(2) {
    background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
  }
  .stripBox:nth-child(3) {
    background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
  }
  .stripBox:nth-child(4) {
    background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
  }
  .stripBox:nth-child(5) {
    background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
  }
  .stripBox:nth-child(6) {
    background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
  }
  .stripBox:nth-child(7) {
    background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
  }
  .stripBox:nth-child(8) {
    background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
  }
}

<div class="container">
  <div class="row no-gutters">
    <div class="col-12 col-lg-3 stripBox stripBox--left">
      <div class="stripBox__smallNum smallNum">01</div>
      <h3 class="heading-quinary stripBox__heading">Market analysis</h3>
    </div>
    <div class="col-12 col-lg-3 stripBox stripBox--right">
      <div class="stripBox__smallNum smallNum">02</div>
      <h3 class="heading-quinary stripBox__heading">Planning & Design Long long</h3>
    </div>
    <div class="col-12 col-lg-3 stripBox stripBox--left">
      <div class="stripBox__smallNum smallNum">03</div>
      <h3 class="heading-quinary stripBox__heading">Market Plan Design</h3>
    </div>
    <div class="col-12 col-lg-3 stripBox stripBox--right">
      <div class="stripBox__smallNum smallNum">04</div>
      <h3 class="heading-quinary stripBox__heading">Short</h3>
    </div>
  </div>
</div>

Why is that? All I want is for the elements being on the same position, properly at the right bottom corner. How can I fix this?

Your problem is the origin. You're rotating around the wrong point. — SLaks, Feb 09 '18 at 20:24
Possible duplicate of [CSS 3: text rotation bug?](https://stackoverflow.com/questions/6215784/css-3-text-rotation-bug) — Temani Afif, Feb 09 '18 at 20:49

Stickers · Accepted Answer · 2018-02-10T00:34:32.380

How can I fix it?

Replace:

transform: rotate(-90deg) translate(0, -100%);
transform-origin: 0 0;

With:

transform: rotate(-90deg) translate(100%, 0);
transform-origin: right bottom;

Why is that?

transform-origin, it is the original position of the element itself before any transformation, and not the parent.
translate(X, Y), X is for the horizontal axis, Y is for the vertical axis, by default.
When you combine rotate() then translate(X, Y), the axis of X and Y could be no longer horizontal and vertical, the directions are decided by the rotation value.

In following example, it pins the rotated text to the right bottom corner.

.container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid;
}

.container:before {
  position: absolute;
  right: 0;
  bottom: 0;
  content: "some text content";
  transform: rotate(-90deg) translate(100%, 0);
  transform-origin: right bottom;
}

<div class="container"></div>

You can also use writing-mode, the lettering is a bit different though.
Uncomment the last line you'll get the same results as above.

.container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid;
}

.container:before {
  position: absolute;
  right: 0;
  bottom: 0;
  content: "some text content";
  writing-mode: vertical-lr;
  /* transform: rotate(-180deg); */
}

<div class="container"></div>

How to rotate text and pin to the right bottom corner?

1 Answers1