如何在引导中旋转段落

Question

我试着把这个div旋转90度，但它似乎不起作用。没有引导类来做它，css也没有对它做任何事情。

​

#socials {
  transform: rotate(90deg);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section>
  <div class="container-fluid">
    <svg class="svgOne position-absolute bottom-0 start-1" width="13" height="334" viewBox="0 0 13 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="13" height="334" fill="black"/>
    </svg>
    <svg class="svgTwo position-absolute top-2 start-1" width="13" height="176" viewBox="0 0 13 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="13" height="176" fill="black"/>
    </svg>
    <div class="fs-4 text-light" id="socials">Socials</div>
  </div>
</section>

​

下面是一张图片：在这里输入图像描述

Answer 1

在我看来很好，但是如果您想要在黑色svg区域中的文本，您的转换原点似乎是关闭的。我改变了html/体的颜色，这样你就能更好地看到它。

​

#socials {
  transform: rotate(90deg);
  transform-origin: bottom left;
}
html, body { background-color: #333; }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section>
  <div class="container-fluid">
    <svg class="svgOne position-absolute bottom-0 start-1" width="13" height="334" viewBox="0 0 13 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="13" height="334" fill="black"/>
    </svg>
    <svg class="svgTwo position-absolute top-2 start-1" width="13" height="176" viewBox="0 0 13 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="13" height="176" fill="black"/>
    </svg>
    <div class="fs-4 text-light" id="socials">Socials</div>
  </div>
</section>

​

Answer 2

​

#socials {
  transform: rotate(-90deg);
}

<section>
  <div class="container-fluid" id="socials">
    <svg class="svgOne position-absolute bottom-0 start-1" width="13" height="334" viewBox="0 0 13 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="13" height="334" fill="black"/>
    </svg>
 <div class="fs-4 text-light" >Socials</div>
    <svg class="svgTwo position-absolute top-2 start-1" width="13" height="176" viewBox="0 0 13 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="13" height="176" fill="black"/>
    </svg>
   
  </div>
</section>

​