代码之家  ›  专栏  ›  技术社区  ›  Joshua Leung

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

css-transforms css
  •  2
  • Joshua Leung  · 技术社区  · 6 年前

    我正在摆弄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 回复  |  直到 6 年前
        1
  •  7
  •   Stickers    6 年前

    我怎样才能修复它?

    替换: 

    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() 然后 平移(X,Y) ,轴 十、 和 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=“容器”></div>
    推荐文章
    Jam3sn  ·  变量旋转文本的绝对位置
    6 年前
    John Balvin Arias  ·  当css transform:scale()处于活动状态时,单击边框按钮会触发单击
    6 年前
    Joshua Leung  ·  如何旋转文本并固定到右下角?
    6 年前
    marius  ·  jQuery UI可选css转换问题
    6 年前
    jean-max  ·  矩形中的菱形HTML和CSS3
    6 年前
    Eugenio  ·  无极旋转DIV,但具有绝对定位
    6 年前
    Boucherie  ·  CSS/SCSS rails转换div,但不是嵌套图像(rails)
    7 年前
    akhil regonda  ·  如何使用transform scale删除屏幕上显示的滚动条?
    7 年前
    JV Lobo  ·  具有transform属性的元素内的子元素z索引
    7 年前
    Scoob  ·  在flexbox中不工作的锚点元素上变换比例
    7 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号