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.


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


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