为什么我不能使用 transform： translateY() 翻译元素？

Question

我试图只将字母'h'下移40px，但只有当我移动整个单词时，翻译才能工作。我尝试将'h'放在相对于父级的绝对位置，但

'ello'HTML

<div class="container">
<span class="word">
<span class="character first" style="transition-delay: 0s;">h</span>
<span class="character" style="transition-delay: 0.025s;">e</span>
<span class="character" style="transition-delay: 0.05s;">l</span>
<span class="character" style="transition-delay: 0.075s;">l</span>
<span class="character" style="transition-delay: 0.1s;">o</span>
</span>
</div>

CSS

.container {
display: flex;
justify-content: center;
align-items: center;
width:100vw;
height:100vh;
}
span {
font-size:60px;
}
.word {
border-style: solid;
border-color: coral;
display: inline-block;
}
.first {
transform: translateY(40px);
}

Answer 1

Transform不适用于内联元素。

.first {
display:inline-block;
transform: translateY(40px);
}

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Answer 2

Span不能具有transform属性，要对其进行转换，应添加"显示：块"；或者只使用div代替

.first {
transform: translateY(40px);
display: block;
}

或

<div class="container">
<div class="word">
<div class="character first" style="transition-delay: 0s;">h</div>
<div class="character" style="transition-delay: 0.025s;">e</div>
<div class="character" style="transition-delay: 0.05s;">l</div>
<div class="character" style="transition-delay: 0.075s;">l</div>
<div class="character" style="transition-delay: 0.1s;">o</div>
</div>
</div>

Answer 3

修改span元素的CSS，如下所示：

span {
font-size: 60px;
display: inline-block;
}

Answer 4

您没有调用正确的类

#word-h {
transform: translateY(40px);
}

<span id="word-h" class="character first" style="transition-delay: 0s;">h</span>