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

Question

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

这是旋转部分的代码：

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

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");
  }
}

这是为什么？我想要的只是元素位于同一位置，正确地位于右下角。我怎样才能解决这个问题？

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可不再水平和垂直方向由旋转值决定。

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

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

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

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

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