<!DOCTYPE html>

<html>
    <head>
        <title>CSS 3D Animation</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="box">
                <span style="--i:1;"><i> Code   </i>Name <i> Is </i>Adi</span>
                <span style="--i:2;"><i> Code   </i>Name <i> Is </i>Adi</span>
                <span style="--i:3;"><i> Code   </i>Name <i> Is </i>Adi</span>
                <span style="--i:4;"><i> Code   </i>Name <i> Is </i>Adi</span>
                <span style="--i:5;"><i> Code   </i>Name <i> Is </i>Adi</span>
                <span style="--i:6;"><i> Code   </i>Name <i> Is </i>Adi</span>
                <span style="--i:7;"><i> Code   </i>Name <i> Is </i>Adi</span>
                <span style="--i:8;"><i> Code   </i>Name <i> Is </i>Adi</span>
                <span style="--i:9;"><i> Code   </i>Name <i> Is </i>Adi</span>
                <span style="--i:10;"><i> Code   </i>Name <i> Is </i>Adi</span>
                <span style="--i:11;"><i> Code   </i>Name <i> Is </i>Adi</span>
                <span style="--i:12"><i>  Code   </i>Name <i> Is </i>Adi</span>
                <span style="--i:13;"><i> Code   </i>Name <i>Is </i>Adi</span>
                <span style="--i:14;"><i> Code   </i>Name <i>Is </i>Adi</span>
                <span style="--i:15;"><i> Code   </i>Name <i>Is </i>Adi</span>
                <span style="--i:16;"><i> Code  </i>Name <i>Is </i>Adi</span>
                <span style="--i:17;"><i> Code   </i>Name <i>Is </i>Adi</span>
                <span style="--i:18"><i> Code   </i>Name <i>Is </i>Adi</span>
               
               
            </div>
            <!--360/22 = 18.deg-->
        </div>
    </body>
</html>



*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "poppins";
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height:  100vh;
    background: rgb(0, 0, 0);
    overflow: hidden;
}
.container
{
    display: flex;
    justify-content: center;
    align-items: center;
}
.container .box
{
    transform-style: preserve-3d;
    animation: animate 25s linear infinite;
}
@keyframes animate
{
    0%
    {
        transform: perspective(1000pv) rotateX(0deg) rotate(35deg);
    }
    100%
    {
        transform: perspective(1000px) rotateX(360deg) rotate(35deg);
    }
}

.container .box span
{
    position: absolute;
    color: rgb(4, 255, 0);
    font-size: 3.5em;
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 900;
    padding: 0 10px;
    background: linear-gradient(90deg, transparent,transparent);
    line-height: 0,75em;
    transform-style: preserve-3d;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transform: translate(-50%,-50%)rotateX(calc(var(--i)* 22.5deg)) translateZ(99px);

}
.container .box span i:nth-child( 1)
{
font-style: initial;
color: #0400ff;
}
.container .box span i:nth-child( 2)
{
font-style: initial;
color: #ff0000;
}