Animasyon Küp

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>3D Dönen Küp</title>
    </head>
    <body>
        <div id="stage">
            <div id="front" class="plane"><p>@thecodeblanks</p></div>
            <div id="back" class="plane"><p>Html</p></div>
            <div id="right" class="plane"><p>Css</p></div>
            <div id="left" class="plane"><p>Javascript</p></div>
            <div id="top" class="plane"><p>Jquery</p></div>
            <div id="bottom" class="plane"><p>For You</p></div>
        </div>
    </body>
</html>

body {
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 800px;
    background-color: transparent;
}
#stage {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    transform-style: preserve-3d;
    animation: rotate 10s linear infinite;
}
.plane {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid black;
    background: rgba(0, 150, 255, 0.5);
    opacity: 0.8;
    display: flex;
    justify-content: center;
    align-items: center;
}
.plane p {
    color: white;
    font-size: 24px;
    font-weight: bold;
} /* Yazı stili */
#front {
    transform: translateZ(100px);
}
#back {
    transform: rotateY(180deg) translateZ(100px);
}
#right {
    transform: rotateY(90deg) translateZ(100px);
}
#left {
    transform: rotateY(-90deg) translateZ(100px);
}
#top {
    transform: rotateX(90deg) translateZ(100px);
}
#bottom {
    transform: rotateX(-90deg) translateZ(100px);
}

@keyframes rotate {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}