JSFiddle - React, Tailwind, and code Playground

HTML

<div id="title" align="center">
    <h1>teaaast</h1>
</div>

CSS

div
{
width:100px;
height:100px;
-webkit-animation: rotate-h1 2s infinite alternate ease-in-out;
}

#title h1 {
    font-weight: bold;
    text-align: center;
    font-size: 3em;
    line-height: 1;

    -webkit-transform-style: preserve-3d;
    -webkit-animation: rotate-h1 4s infinite alternate linear;
    -webkit-animation-delay: 1s;

    -webkit-transform: perspective(1000px) rotateY(0deg);

    -webkit-transition: all 1s ease-in-out;
}

@-webkit-keyframes rotate-h1 {
        0%   { 
            -webkit-transform: perspective(1000px) translate(50px, 100px) rotateY(-30deg) rotateZ(-10deg);
            opacity:0.2;
            color:black;    
        }
        50% {
            -webkit-transform: perspective(1000px) translate(0px,0px) rotateY(0deg) rotateZ(0deg);
            opacity:1.0;
            color:blue;
        }
        100% { 
            -webkit-transform: perspective(1000px) translate(100px, 200px) rotateY(30deg) rotateZ(10deg);
            opacity:0.2;
            color:black;
        }
}