Why can't I translate element using transform: translateY()?-CodePudding

I tried to move only the letter 'h' down by 40px, but the translation only work if I move the entire word. I talso tried to put 'h' in position absolute relative to the parent but 'ello' loses it's original position.

HTML

<div >
  <span >
    <span  style="transition-delay: 0s;">h</span>
    <span  style="transition-delay: 0.025s;">e</span>
    <span  style="transition-delay: 0.05s;">l</span>
    <span  style="transition-delay: 0.075s;">l</span>
    <span  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);
}

CodePudding user response：

Transform doesn't work on inline elements.

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

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

CodePudding user response：

Modify your span element's CSS as given below:

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

CodePudding user response：

Span cannot have transform property, to transform it you should add "display: block" to this element or just use div instead

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

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

CodePudding user response：

You do not call the class correct

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

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