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:rotateY(var(--boxRotateY)) rotateX(var(--boxRotateX));transition:transform .8s,left .5s,top .5s,translate .5s;margin:0px;--boxRotateX: 0deg;--boxRotateY: 0deg}.box.right{--boxRotateY: -90deg}.box.left{--boxRotateY: 90deg}.box.top{--boxRotateX: -90deg}.box.bottom{--boxRotateX: 90deg}.box.back{--boxRotateY: 180deg}.box.center{left:50%;top:50%;translate:-50% -50% -100px}.box.topLeft{left:0px;top:0px;translate:0px 0px -100px}.box.bottomLeft{left:0px;top:100%;translate:0px -100% -100px}.box.topRight{left:100%;top:0px;translate:-100% 0px -100px}.box.bottomRight{left:100%;top:100%;translate:-100% -100% -100px}.box .face{--angle: calc(90deg - var(--rotateX) + var(--boxRotateX));--lightness: calc((1 + cos(var(--angle))) * 20%);position:absolute;outline:1px solid #000;background-color:hsl(0, 0%, var(--lightness));font-size:20px;font-weight:900;color:#fff;display:grid;place-items:center;height:var(--depth);width:var(--depth);--rotateX: 0deg;--rotateY: 0deg;transform:rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(calc(var(--depth) / 2));transition:background-color .8s}.box .face:is(.front,.back,.bottom,.top){width:100%}.box .face:is(.front,.back,.left,.right){height:100%}.box .face.back{--rotateY: -180deg}.box .face.right{right:0px;--rotateY: 90deg}.box .face.left{--rotateY: -90deg}.box .face.top{--rotateX: 90deg}.box .face.bottom{bottom:0px;--rotateX: -90deg}/*# sourceMappingURL=index.css.map */