我希望我的标题/h1中的一个单词水平阅读，第二个单词垂直阅读

Question

我正在制作一个网站，希望我的 title/h1 标签中的第一个词水平阅读，第二个词垂直阅读。 HTML 和 CSS

我尝试在我的 h1 中使用 span 标签，但它只会让我更改颜色并且在我使用旋转功能时不起作用。

html

<h1>
    <span class="horizontal-QuanT">QuanT</span>
    <span class="verticle-Tech">Tech</span>
</h1>

CSS

h1{
color:bisque;
text-align: center;} 

h1 span.horizontal-QuanT{
color:gray} 

h1 span.verticle-Tech{
color:white;
rotate: 90deg;}

Answer 1

行内元素不能旋转，需要在垂直跨度上设置

display: inline-block;

。此外，旋转的正确语法是

transform: rotate(90deg);

.

h1 {
  text-align: center;
} 

h1 span.horizontal-QuanT {
  color: gray;
} 

h1 span.vertical-Tech {
  color: black;
  display: inline-block;
  transform: rotate(90deg);
  transform-origin: bottom left;
}

<h1>
    <span class="horizontal-QuanT">QuanT</span>
    <span class="vertical-Tech">Tech</span>
</h1>