如何旋转文本并固定到右下角？

Question

我正在摆弄旋转属性并意识到元素会根据其文本长度移动到不同的位置。

这是旋转部分的代码：

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>

这是为什么？我想要的只是让元素位于同一位置，正确地位于右下角。我该如何解决这个问题？

Answer 1

如何解决？

替换：

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

有：

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

这是为什么？

transform-origin，它是元素本身在任何变换之前的原始位置，而不是父元素。
translate(X, Y),X为横轴,Y为纵轴,默认为
当rotate()和translate(X, Y)合并时，X和Y的轴不再是水平和垂直，方向是由旋转值决定。

在下面的示例中，它将旋转后的文本固定在右下角。

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

也可以用writing-mode，不过字体有点不同
取消注释最后一行，您将获得与上面相同的结果。

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

css

css-transforms