3D Flipping Loader

<div class="loader">
    <span>L</span>
    <span>O</span>
    <span>A</span>
    <span>D</span>
    <span>I</span>
    <span>N</span>
    <span>G</span>
</div>

Centering The Loader:

Moving on to CSS code. Let us start by setting a pleasant shade of blue (Hex-code: #1E90FF) as a background to our page. The first thing we want to do is centre our loader. We will use flex layout for the centering purpose. You can watch a tutorial on how you can use flex to centre any text, image or div element watch here.

body {
     background-color: #1e90ff;
     padding: 0;
     margin: 0;
     height: 100vh;
     width: 100vw;
     display: flex;
     align-items: center;
     justify-content: center;
}

Adding Depth With Perspective.:

We use the perspective property to set some depth for our animations. Here we are using a moderate value of 700px. Here Note that lower the value of perspective higher is the intensity of the 3D effect.

.loader {
     perspective: 700px;
}

Adding Transitions and Animations:

Moving on to our span elements lets add some basic typography styling. Now we set the transition-origin to 0 70%. It simply means the origin or centre of all our animations on these span elements will be 70% from the top. Let’s set the transform style to preserve-3D so the animation doesn’t look flat.

And the most awaited part of code, Animations. We want animations to occur over and over again continuously hence we set the animation-iteration-count to infinite. We have set it using the shorthand method in animation attribute. Set the animation-duration to 2.6 seconds. We also use shorthand method to set the animation-timing-function to linear so that animation speed curve has same value from start to end ensuring a smooth animation.

.loader>span {
    font-size: 130px;
    font-family: "Poppins",sans-serif;
    display: inline-block;
    animation: flip 2.6s infinite linear;
    transform-origin: 0 70%;
    transform-style: preserve-3d;	
}

Setting Up the Keyframes:

Keyframes are where the magic happens. We need Keyframes to flip the letters twice over the horizontal axis. For this, let us add transform rotateY(360deg) at 35% and 100% which results in the first flip to be quicker than the second flip giving smooth transitions towards the end animation.

@keyframes flip {
    35% {
       transform: rotateX(360deg);
     }
    100% {
       transform: rotateX(360deg);
     }
}

Adding Delays:

We set each of alternate letters of ‘LOADING’ to white color by using the ‘:nth-child(even)’ selector which selects all the span elements which are even children. This results in alternate black and white coloured letters.

Lastly, we need the letters to flip one after the other in perfect sync. For that, we add a small progressive delay in each of the span element. Here we are using delay in steps of 0.3s. And we are done.

.loader>span:nth-child(even) {
    color: white;
}
.loader>span:nth-child(2) {
    animation-delay: 0.3s;
}
.loader>span:nth-child(3) {
    animation-delay: 0.6s;
}
.loader>span:nth-child(4) {
    animation-delay: 0.9s;
}
.loader>span:nth-child(5) {
    animation-delay: 1.2s;
}
.loader>span:nth-child(6) {
    animation-delay: 1.5s;
}
.loader>span:nth-child(7) {
    animation-delay: 1.8s;
}