Flip Letters Animation

In this tutorial, you will learn how to flip each letters of a text with pure CSS. Each letter of the text must be wrapped with a span element to achieve the flip animation. Watch the video below for a detailed tutorial.

HTML

<body>
  <div class="text">
    <span style="--delay: 1">W</span>
    <span style="--delay: 2">i</span>
    <span style="--delay: 3">n</span>
    <span style="--delay: 4">t</span>
    <span style="--delay: 5">e</span>
    <span style="--delay: 6">r</span>
    <span style="--delay: 7">w</span>
    <span style="--delay: 8">i</span>
    <span style="--delay: 9">n</span>
    <span style="--delay: 10">d</span>
  </div>
</body>

CSS

body {
  margin: 0;
  background-color: #2e3537;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.text span {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  font-size: 5em;
  color: white;
  display: inline-block;
  animation: animate 3s infinite;
  animation-delay: calc(0.2s * var(--delay));
}

@keyframes  animate {
  0%, 80% {
    transform: rotateY(360deg);
  }
}