.boxes{--size:32px;--duration:.8s;height:calc(var(--size)*2);margin-top:calc(var(--size)*1.5*-1);position:relative;transform:rotateX(60deg) rotate(45deg) rotateY(0) translateZ(0);transform-origin:50% 50%;transform-style:preserve-3d;width:calc(var(--size)*3)}.boxes .box{height:var(--size);left:0;position:absolute;top:0;transform-style:preserve-3d;width:var(--size)}.boxes .box:first-child{animation:box1 var(--duration) linear infinite;transform:translate(100%)}.boxes .box:nth-child(2){animation:box2 var(--duration) linear infinite;transform:translateY(100%)}.boxes .box:nth-child(3){animation:box3 var(--duration) linear infinite;transform:translate(100%,100%)}.boxes .box:nth-child(4){animation:box4 var(--duration) linear infinite;transform:translate(200%)}.boxes .box>div{--background:#0c9769;--top:auto;--right:auto;--bottom:auto;--left:auto;--translateZ:calc(var(--size)/2);--rotateY:0deg;--rotateX:0deg;background:var(--background);bottom:var(--bottom);height:100%;left:var(--left);position:absolute;right:var(--right);top:var(--top);transform:rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));width:100%}.boxes .box>div:first-child{--top:0;--left:0}.boxes .box>div:nth-child(2){--background:#10b981;--right:0;--rotateY:90deg}.boxes .box>div:nth-child(3){--background:#10b981;--rotateX:-90deg}.boxes .box>div:nth-child(4){--background:#0cffae26;--top:0;--left:0;--translateZ:calc(var(--size)*3*-1)}@keyframes box1{0%,50%{transform:translate(100%)}to{transform:translate(200%)}}@keyframes box2{0%{transform:translateY(100%)}50%{transform:translate(0)}to{transform:translate(100%)}}@keyframes box3{0%,50%{transform:translate(100%,100%)}to{transform:translateY(100%)}}@keyframes box4{0%{transform:translate(200%)}50%{transform:translate(200%,100%)}to{transform:translate(100%,100%)}}