如何使用顺风旋转文本 css

Question

我有这个 html 例子：

  <div class="h-screen">
    <div class="absolute inset-0 -z-1 bg-black"></div>
    <div class="flex flex-col text-white h-screen">
      <div class="flex justify-between h-full">
        <div class="flex flex-col justify-between space-y-5 w-24">
          <div class="h-2/3 bg-red-300">
            <div class="block origin-left-top transform -rotate-90">
              SUBSCRIBE AND CANCEL ANYTIME ANYWHERE
            </div>
          </div>
          <div class="flex flex-col items-center space-y-5">
            <div class="pb-5">
              <button
                class="border-white flex items-center justify-center border-2 w-10 h-10"
              >
                <i-uil-comment-alt-dots />
              </button>
            </div>
          </div>
        </div>
        <div>mid</div>
        <div class="w-24">right</div>
      </div>
    </div>
  </div>

我希望文本看起来像这样：

但由于某种原因它并没有占用全部 space，像这样：

Answer 1

对于这样一个简单的任务，您的 HTML 太多了。从这里开始，它将为您提供所需的基础知识

<div class="transform -rotate-90 bg-black text-white">SUBSCRIBE AND CANCEL ANYTIME ANYWHERE</div>

Answer 2

您必须将writing-mode设置为vertical-rl，然后旋转180°

<div className="rotate-180 bg-black text-white"
  style={{ writingMode: 'vertical-rl' }}
>
  SUBSCRIBE AND CANCEL ANYTIME ANYWHERE
</div>

如何使用顺风旋转文本 css

How to grow rotated text with tailwind css

tailwind-css