JSFiddle - React, Tailwind, and code Playground

by Kriem

HTML

<world>
    <cube></cube>
</world>

CSS

world 
{
	perspective: 800px;
	perspective-origin: 50% 100px;
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: #222;
}

cube
{
    position: absolute;
    left: 50%;
    top: 50%;
	transform-style: preserve-3d;
    transform: translateX(-50px);
}
cube side
{
    position: absolute;
    background: rgba(255,255,255,.15);
	width: 200px;
    height: 200px;
    backface-visibility: hidden;
}

cube side:nth-child(1)
{
	transform: translateZ(-100px) rotateY(180deg);
}
cube side:nth-child(2)
{
	transform: rotateY(-270deg) translateX(100px);
	transform-origin: top right;
}
cube side:nth-child(3)
{
	transform: rotateY(270deg) translateX(-100px);
	transform-origin: center left;
}
cube side:nth-child(4) 
{
	transform: rotateX(-90deg) translateY(-100px);
	transform-origin: top center;
}
cube side:nth-child(5)
{
	transform: rotateX(90deg) translateY(100px);
	transform-origin: bottom center;
}
cube side:nth-child(6)
{
	transform: translateZ(100px);
}

@-webkit-keyframes spin 
{
	from { transform: rotateY(0); }
	to { transform: rotateY(360deg); }
}

cube 
{
	-webkit-animation: spin 5s infinite linear;
}

JavaScript

init();

function init(){
    
    var $cube = $('cube');
 
    for (var i=0; i<6; i++){
     
        $cube.append('<side>');
    }
}