.scene{width:100px;height:100px;perspective:400px}.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:translateZ(-50px);animation:rotate-cube 8s linear infinite}.cube__face{position:absolute;width:100px;height:100px;border:2px solid hsl(var(--primary));background-color:hsla(var(--primary)/.2);opacity:.7}.cube__face--front{transform:rotateY(0deg) translateZ(50px)}.cube__face--back{transform:rotateY(180deg) translateZ(50px)}.cube__face--right{transform:rotateY(90deg) translateZ(50px)}.cube__face--left{transform:rotateY(-90deg) translateZ(50px)}.cube__face--top{transform:rotateX(90deg) translateZ(50px)}.cube__face--bottom{transform:rotateX(-90deg) translateZ(50px)}@keyframes rotate-cube{0%{transform:rotateX(0deg) rotateY(0deg)}to{transform:rotateX(1turn) rotateY(1turn)}}