如何将文本和图钉旋转到右下角？

时间：2018-02-09 20:22:20

标签： css css3 css-transforms

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

以下是旋转部分的代码：

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>

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

1 个答案:

答案 0 :(得分：3)

我该如何解决？

替换：

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

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<div class="container"></div>
＆＃13;
＆＃13;
＆＃13;

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

＆＃13;
＆＃13; 
.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); */
}
＆＃13; 
<div class="container"></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题