0

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 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);
}
Domino
  • 37
  • 8

4 Answers4

2

Transform doesn't work on inline elements.

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

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

SamiElk
  • 2,272
  • 7
  • 20
0

Modify your span element's CSS as given below:

span {
  font-size: 60px;
  display: inline-block;
}
Gourav Pokharkar
  • 1,568
  • 1
  • 11
  • 33
0

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;
}

OR

<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>
MrEraxd
  • 21
  • 5
-1

You do not call the class correct

#word-h {
   transform: translateY(40px);
}
<span id="word-h" class="character first" style="transition-delay: 0s;">h</span>
Elikill58
  • 4,050
  • 24
  • 23
  • 45
DirtyyyDan
  • 85
  • 7