如何用css垂直写到底部到顶部

Question

如何使用HTML和CSS从下到上垂直书写？我尝试过很多东西写作mod：tb-rl;但问题尚未解决。

Answer 1

使用课程div

创建rotate

<div class="rotate"> Hello World </div>

然后定义CSS类

.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

希望这就是你要找的东西。

Answer 2

.rotate {
  /* make width fit content */
  display: inline-block;
  /* rotate 90 degrees counterclockwise */
  /* and move down on 100% of its height */
  /* (actually width, but when rotated it looks like height) */
  transform: rotate(-90deg) translateX(-100%);
  /* perform this transformation relatively to the top left corner of block */
  transform-origin: top left;
  
  /* styles for demo */
  padding: 10px;
  background-color: red;
  color: #fff;
  text-transform: uppercase;
}

<div class="rotate">Profile</div>

但请注意，如果转换元素不会被转换，它的位置也会相同。因此，如果您有一些带有文本的兄弟姐妹，那么它们将重叠。演示：

.rotate {
  display: inline-block;
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: 0 0;
  
  /* just styles for current demo */
  padding: 10px;
  background-color: red;
  color: #fff;
  text-transform: uppercase;
}

<div class="container">
  <div class="rotate">Profile</div>
  <div>Some other text</div>
  <div>Some other text</div>
  <div>Some other text</div>
</div>

在这种情况下，您可以对此元素应用绝对定位。演示：

.container {
  /* make absolute positioning relative to container */
  position: relative;
  /* some offset for its not rotated text */
  /* need to be equal rotated element height + offset from rotated element */
  padding-left: 45px;
}

.rotate {
  display: inline-block;
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: 0 0;
  
  /* apply absolute positioning */
  position: absolute;
  /* move element to the left */
  left: 0;
  
  /* just styles for demo */
  padding: 10px;
  background-color: red;
  color: #fff;
  text-transform: uppercase;  
}

<div class="container">
  <div class="rotate">Profile</div>
  <div>Some other text</div>
  <div>Some other text</div>
  <div>Some other text</div>
</div>

Answer 3

尝试使用转换。

.rotate {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}