body{font-family:helvetica;display:grid;place-items:center;align-content:center;inset:0px;position:absolute}#scene{position:relative;width:500px;height:500px;perspective:400px}.box{position:absolute;width:300px;height:200px;--depth: 200px;transform-style:preserve-3d;transform:translateZ(-100px);transition:transform .8s,left .5s,top .5s,translate .5s;margin:0px}.box .front{background:rgba(255,0,0,.5)}.box .back{background:rgba(0,128,0,.5)}.box .right{background:rgba(0,0,255,.5)}.box .left{background:rgba(255,166,0,.5)}.box .top{background:rgba(255,255,0,.5)}.box .bottom{background:rgba(128,0,128,.5)}.box.right{transform:rotateY(-90deg)}.box.left{transform:rotateY(90deg)}.box.top{transform:rotateX(-90deg)}.box.bottom{transform:rotateX(90deg)}.box.back{transform:rotateY(180deg)}.box.front{transform:rotateY(0deg)}.box.center{left:50%;top:50%;translate:-50% -50%}.box.topLeft{left:0px;top:0px}.box.bottomLeft{left:0px;top:100%;translate:0px -100%}.box.topRight{left:100%;top:0px;translate:-100% 0px}.box.bottomRight{left:100%;top:100%;translate:-100% -100%}.box .face{position:absolute;outline:1px solid #000;font-size:20px;font-weight:900;color:#fff;display:grid;place-items:center;height:var(--depth);width:var(--depth)}.box .face:is(.front,.back,.bottom,.top){width:100%}.box .face:is(.front,.back,.left,.right){height:100%}.box .face.front{transform:translateZ(calc(var(--depth) / 2))}.box .face.back{transform:rotateY(-180deg) translateZ(calc(var(--depth) / 2))}.box .face.right{right:0px;transform:rotateY(90deg) translateZ(calc(var(--depth) / 2))}.box .face.left{transform:rotateY(-90deg) translateZ(calc(var(--depth) / 2))}.box .face.top{transform:rotateX(90deg) translateZ(calc(var(--depth) / 2))}.box .face.bottom{bottom:0px;transform:rotateX(-90deg) translateZ(calc(var(--depth) / 2))}/*# sourceMappingURL=index.css.map */