JSFiddle - React, Tailwind, and code Playground

by christianmenz

HTML

<div class="canvas">
    <div class="side"></div>
</div>

CSS

@-webkit-keyframes spin-anim {
    from {
        -webkit-transform: rotateY(0);
    }
    to {
        -webkit-transform: rotateY(360deg);
    }
}
@keyframes spin-anim {
    from {
        transform: rotateY(0);
    }
    to {
        transform: rotateY(360deg);
    }
}
.canvas {
    width:250px;
    height:250px;
    background-color:black;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 500px;
    perspective: 500px;
}
.side {
    margin:50px;
    background-color:blue;
    width:150px;
    height:150px;
    -webkit-animation: spin-anim 10s infinite linear;
    animation: spin-anim 10s infinite linear;
}